SVG + Police intégrée: Comment afficher le texte en italique?

Question

Mon objectif est de créer un logo vectoriel auto-contenant dans svg= Je veux intégrer tous les glyphes de police à l'intérieur de ce fichier SVG.

Pour une partie de mon texte, j'ai besoin d'une police spéciale en italique. La police que je veux (Desyrel) n'existe que dans un seul fichier .ttf. J'ai ensuite converti cette police sur SVG (essayé différents outils en ligne et Fondrege).

J'ai ensuite créé un fichier SVG avec le texte que je veux afficher et les définitions de police SVG intégrées (glyphes sélectionnés uniquement). Cela ressemble à:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="800px" height="300px" version="1.1" xmlns = 'http://www.w3.org/2000/svg'>
  <defs>
     <font id="font1" horiz-adv-x="614" >
        <font-face font-family="Desyrel" units-per-em="2048" />
        <glyph unicode="-" d="M109 301v166h376v-166h-376z" />
...
     </font>
  </defs>

   <text x="230" y="100" font-family="Desyrel" font-size="110px" font-style="italic">myText</text>
</svg>

Quand je fais cela, ma police n'apparaît pas en italique. J'ai essayé de changer le style de police dans la définition de la Font-face en "normal" ou même "italique".

Le problème est que je sais que cette police peut être affichée en italique. Si j'inclus dans mon SVG:

<style type="text/css">
   <![CDATA[
     @font-face {
       font-family: 'Desyrel2'; 
       font-weight: normal;
       font-style: normal;
       src: url("Desyrel.ttf")
     }
   ]]>
</style>

et utilisez cette famille-famille pour le texte, le texte est effectivement affiché en italique. Mais cette solution défait mon objectif initial d'avoir un SVG autonome ...

Je ne sais pas grand chose de polices ou de SVG, mais j'ai beaucoup cherché sur le Web pour trouver des solutions ou des indices pour mon problème. C'est pourquoi j'ai besoin de votre aide!

Answer 1

Votre police n'est pas italique, que se passe-t-il dans l'affaire TTF, c'est que le navigateur synthétise l'italique en ajoutant une petite transformation de rabais.Il semble que cela ne soit pas fait pour les polices SVG (probablement une surveillance).

Une solution consiste à utiliser Fonforge pour incliner les glyphes (si c'est tout ce dont vous avez besoin), dans les menus, c'est "Élément> Style> Italique ..." (Plus d'infos ici ).

génère ensuite la police SVG.