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



我的目的是在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了解不多,但我在网上进行了广泛的搜索,以找到我的问题的解决方案或线索......这就是为什么我需要你的帮助!

您的字体不是斜体,在 TTF 情况下发生的情况是浏览器通过添加一个小的倾斜转换来合成斜体。似乎没有对 SVG 字体执行此操作(可能是疏忽)。

一种解决方案是使用fontforge来倾斜字形(如果这就是您所需要的),在菜单中它是"元素>样式>斜体..."(更多信息在这里)。

然后生成 svg 字体。

相关内容

  • 没有找到相关文章

最新更新