1

我的目的是在 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 了解不多，但我在网上进行了广泛搜索，以找到解决我的问题的解决方案或线索。这就是我需要你帮助的原因！

4

1 回答 1

6

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

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

然后生成 svg 字体。

于 2011-05-14T14:55:32.413 回答