Javascript Girl
  1. Javascript Girl
  3. SVG ne génère pas de polices dans Firefox (fonctionne dans IE9 et Chrome)
Intereting Posts
Comment puis-je faire fonctionner les lecteurs d'écran pour afficher et cacher du contenu dans une application Web dynamique? Jquery cliquez sur l'événement pour ne pas tirer sur l'élément créé dynamiquement en utilisant jquery IE8 retourne 'Object expected' .slice.call Comment puis-je ajouter une variable à console.log? Comment exécuter un seul test avec Mocha? Intégrez javascript dans le redressement Plusieurs points de vente dans le routeur Ember.js v2 Ajout d'attributs "données-" avec select2 Configurez un cookie sur HttpOnly via Javascript Jquery href et onclick separation Webpack – demande dynamique et chemins Déplacer google map centre javascript api Panneau popup et marqueur au tableau de bord Comment utiliser headroom.js avec Bootstrap 3 navbar? Comment puis-je obtenir des éléments de cousin avec JQuery?

SVG ne génère pas de polices dans Firefox (fonctionne dans IE9 et Chrome)

J'ai un logo vectoriel dans le fichier PSD. Lorsque je l'exporte en tant que fichier AI (Adobe Illustrator) et puis je transforme en SVG, j'ai quelque chose comme ceci: 

<tspan x="0 34.799999 68.75" y="0" id="tspan22" style="font-size:50px;font-variant:normal;font-weight:bold;font-stretch:normal;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;font-family:Novecento wide Book;-inkscape-font-specification:Novecentowide-Bold">AI</tspan>

Ce n'est qu'une courte partie du fichier SVG complet, mais vous pouvez voir qu'il crée des lettres et tente d'utiliser des polices. Ce qui échoue …

Entrez la description de l'image ici

Je préfère l'exporter du fichier SVG en tant que vecteur autonome qui ne requiert aucune police de caractères. Comment cela peut-il être fait?

Deux possibilités:

  1. Essayez de mettre des citations simples autour du nom de la police-famille, sous l'hypothèse que Firefox ne reconnaît pas la chaîne entière, ainsi:

    font-family:'Novecento wide Book';

  2. Essayez de convertir le texte dans AI ou PSD en un vecteur / forme avant d'exporter en tant que SVG. Cela supprimera la dépendance à l'égard de toute famille de polices, ce qui est une considération surtout si vous avez l'intention de publier cela sur le Web. Doit fonctionner parfaitement de cette façon.

Cliquez avec le bouton droit de la souris sur le texte dans un programme vectoriel comme illustrator et sélectionnez le contour du texte. Cela gardera votre police quel que soit le navigateur.

J'ai utilisé des polices intégrées de cette façon dans IE11, Chrome et Firefox sans problème: 

 <svg...> <text transform="matrix(1 0 0 1 52.1787 206.4395)" fill="#F7F7F7" font-family="'Roboto'" font-weight="400" font-size="16">Lorem Ipsum</text> </svg>

Notez que l'attribut font-family est doublechote. C'est comme ça que l'illustrateur le fait. Prenez note pour utiliser le nom de la police de caractères approprié. Illustrator pour des exemples aime mettre "Roboto-Regular" "qui pourrait ne pas être le nom propre du font-face