我想在网页中嵌入的svg中使用自定义字体。使用setattribute,我可以使用Arial ...字体。我认为这些字体嵌入在浏览器中,我可以使用它。但是如何使用自定义字体呢? 在Firefox中,我在css中使用例如@ font-face ....
@font-face {
font-family: "ITCGothicBold";
src: url('fonts/ITCGothicBold.ttf') format("truetype");
}
该font-family适用于Html网页。
另一方面,例如,在svg文本中:
<text xml:space="preserve" text-anchor="middle" font-family="ITCGothicBold.ttf" font-size="24" id="svg_1" y="72.83333" x="74.75" stroke-width="0" stroke="#000000" fill="#000000">HELLO</text>
我想用例如ITCGothicBold.ttf。使用setattribute我可以将ITCGothicBold.ttf放在font_family属性中,但没有任何改变:HELLO文本没有改变。 有谁知道如何使用嵌入在网页中的svg中的自定义字体?感谢
注意:我使用的完整代码是:
<svg width="612" height="394" xmlns="http://www.w3.org/2000/svg">
<defs>
<style type="text/css">@font-face {
font-family: "ITCGothicBold.ttf";
src: url('fonts/ITCGothicBold.ttf') format("truetype");
}</style>
</defs>
<g>
<title>Calque 1</title>
<text fill="#000000" stroke="#000000" stroke-width="0" x="75.75" y="72.83333" id="svg_1" font-size="24" font-family="ITCGothicBold.ttf" text-anchor="middle" xml:space="preserve">HELLO</text>
</g>
</svg>
答案 0 :(得分:5)
您可以像在css中一样更改svgs中的字体。
<style>
@font-face {
font-family: font;
src: url(font.woff);
}
svg{
font-family: font, fallBackFonts, sans-serif;
}
</style
虽然我建议您更详细地定义它以获得更好的兼容性。这样你就可以提供各种后备。
@font-face {
font-family: 'font';
src: url('font.eot');
src: url('location/of/font.eot?#iefix') format('eot'),
url('location/of/font.woff') format('woff'),
url('location/of/font.ttf') format('truetype'),
url('location/of/font.svg#webfont') format('svg');
font-weight: 400;
font-style: normal;
}
提供字体转换的服务(对于eot,woff,truetype和svg文件)是...
https://github.com/briangonzalez/fontprep
http://www.fontsquirrel.com/tools/webfont-generator
话虽这么说,如果你真的想在svg中分配字体IN,你会像你一样添加属性font-family。虽然我不会在命名方案中包含文件扩展名(.ttf)。
答案 1 :(得分:1)
以下是我从另一个SVG文件中引用SVG字体的方法:
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
<defs>
<font-face>
<font-face-src>
<font-face-uri href="file:///.../DejaVuSans.svg"/>
</font-face-src>
</font-face>
</defs>
<text x="0" y="400" font-family="DejaVu Sans" font-size="200">
Abc
</text>
</svg>