SVG +嵌入式字体:如何以斜体显示文本？

Question

我的目的是在SVG中创建一个包含矢量徽标的自我=我想整合此SVG文件中的所有字体字形.

对于我的文本的一部分,我需要一个斜体的特殊字体.我想要的字体(Desyrel)只存在于一个.ttf文件中.然后我将该字体转换为SVG(尝试了不同的在线工具和FontForge).

然后我创建了一个SVG文件,其中包含我要显示的文本和嵌入的svg字体定义(仅限选定的字形).看起来像:

<?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>

当我这样做时,我的字体不会以斜体显示.我尝试将font-face定义中的font-style更改为'normal'或甚至'italic'.

问题是我知道这个字体可以用斜体显示.如果我包含在我的SVG中:

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

并使用该字体为文本,文本确实以斜体显示.但是这个解决方案违背了我最初的目的,即拥有一个自包含的SVG ......

我对字体或SVG了解不多,但我已经在网上广泛搜索,为我的问题找到解决方案或线索..这就是我需要你帮助的原因!

Answer 1

你的字体不是斜体,TTF的情况是浏览器通过添加一个小的偏斜变换来合成斜体.似乎这不适用于SVG字体(可能是疏忽).

一个解决方案是使用fontforge来倾斜字形(如果这就是你需要的全部),在菜单中它是"Element> Style> Italic ......"(这里有更多信息).

然后生成svg字体.