SVG est utile pour la résolution indépendante de l'appareil, mais peut souvent être une douleur car les polices doivent être intégrées dans le fichier à rendre correctement sur tous les navigateurs. svg-embed-font est un outil de ligne de commande pour déterminer facilement quelles polices sont utilisées dans un fichier SVG et les coder en tant qu'actifs de base64.
Si vos actifs SVG ont fière allure sur votre ordinateur et ont gâché tout le monde, c'est parce que les polices ne sont pas correctement intégrées dans le fichier.
svg-embed-font input.svg
Dans le mode par défaut, l'outil analysera le fichier SVG pour toutes les déclarations de Font-Family puis tentera de localiser les fichiers de police correspondants (n'importe quel format de fichier de police). Les correspondances sont définies comme une correspondance de sous-chaîne insensible à la casse pour le nom de famille de police ignorant tous les espaces. Donc, si vous déclarez:
font-family: 'Permanent Marker'
Matches:
permanentmarker.ttf
PermanentMarker-700.otf
Dans ce cas, il y a deux matchs possibles, ce qui peut souvent se produire lorsqu'une police est disponible en poids multiples. Pour spécifier lequel doit être utilisé, indiquez la police sur la ligne de commande après le fichier d'entrée. Plusieurs correspondances possibles doivent être résolues en répertoriant la bonne sur la ligne de commande.
svg-embed-font input.svg permanentmarker.ttf
Un ou plusieurs fichiers de polices préférés peuvent être répertoriés sur la ligne de commande et utiliseront ces fichiers au lieu de toutes les autres correspondances qu'il trouve.
Si vous ne spécifiez pas les fichiers de police exacts, il semblera dans le répertoire actuel et tous les sous-répertoires pour une correspondance, vous pouvez donc présenter vos fichiers dans une hiérarchie logique et les trouveront. S'il épuise tous les fichiers possibles sans trouver de correspondance à chaque police du fichier SVG, il renverra une erreur.
Le fichier de police est encodé de base64 et inclus en tant qu'actif de feuille de style directement dans le fichier SVG. Si vous ouvrez le fichier dans un éditeur de texte, juste avant la balise de clôture </defs> , vous verrez quelque chose comme ce qui suit pour chaque police:
<style type="text/css">
<![CDATA[
@font-face {
font-family: 'Permanent Marker';
src: url('data:application/x-font-ttf;base64,AAEAAAAOAIAAAwBgT1MvMmH1Ke...<lots more>');
}
]]>
</style>
Téléchargez la version appropriée pour votre système d'exploitation sur la page des versions.
Mit