SVG +嵌入字体：如何以斜体显示文本？答案

【问题标题】：SVG + embedded font: how to display text in italic?SVG +嵌入字体：如何以斜体显示文本？
【发布时间】：2011-08-25 11:19:10
【问题描述】：

我的目的是在 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>

当我这样做时，我的字体不会以斜体显示。我尝试将字体定义中的字体样式更改为“普通”甚至“斜体”。

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

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

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

我对字体或 SVG 知之甚少，但我在网络上进行了广泛搜索以找到解决问题的方法或线索。这就是我需要您帮助的原因！

【问题讨论】：

标签： fonts svg embedded-fonts italic

【解决方案1】：

您的字体不是斜体，在 TTF 情况下发生的情况是浏览器通过添加一个小的倾斜变换来合成斜体。这似乎不适用于 SVG 字体（可能是疏忽）。

一种解决方案是使用 fontforge 来倾斜字形（如果你只需要这样的话），在菜单中它是“元素 > 样式 > 斜体...”（更多信息 here）。

然后生成svg字体。

【讨论】：

非常感谢 Erik！我终于设法用那种字体写成斜体了！