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＆gt; Style＆gt; Italic ......”（更多信息here）。

然后生成svg字体。

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

1 个答案: