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