Html svg 中的自定义字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14599755/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Custom Font in svg
提问by anraT
I would like to use custom fonts in a svg embedded in a web page. With setattribute I can use Arial... fonts. I think those fonts are embedded in the browser and I can use it. But how can I do to use custom fonts? In Firefox, when I use in css for exemple @font-face ....
我想在嵌入网页的 svg 中使用自定义字体。使用 setattribute 我可以使用 Arial... 字体。我认为这些字体嵌入在浏览器中，我可以使用它。但是我该怎么做才能使用自定义字体？在 Firefox 中，当我在 css 中使用例如 @font-face ....
@font-face {
font-family: "ITCGothicBold";
src: url('fonts/ITCGothicBold.ttf') format("truetype");
}
that font-family works in a Html web page.
该字体系列适用于 Html 网页。
On the other hand, for exemple, in the svg text:
另一方面，例如，在 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>
I would like to use for exemple ITCGothicBold.ttf. Using setattribute I can put ITCGothicBold.ttf in the font_family attribute but nothing change: the HELLO text is not changing. Does anyone know how to work with custom font in svg embedded in a web page? Thanks
我想以 ITCGothicBold.ttf 为例。使用 setattribute 我可以将 ITCGothicBold.ttf 放在 font_family 属性中，但没有任何改变：HELLO 文本没有改变。有谁知道如何在嵌入网页的 svg 中使用自定义字体？谢谢
NOTE: The full code I have used is:
注意：我使用的完整代码是：
<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>
回答by Quinn Keaveney
You can change fonts in svgs just as you do in css.
您可以像在 css 中一样在 svgs 中更改字体。
<style>
@font-face {
font-family: font;
src: url(font.woff);
}
svg{
font-family: font, fallBackFonts, sans-serif;
}
</style
Though I would suggest you define it more verbosely for better compatibility. That way you can provide a variety of fallbacks.
尽管我建议您更详细地定义它以获得更好的兼容性。这样你就可以提供各种回退。
@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;
}
Services that provide font conversions (for the eot, woff, truetype, and svg files) are...
https://github.com/briangonzalez/fontprep
http://www.fontsquirrel.com/tools/webfont-generator
提供字体转换（用于 eot、woff、truetype 和 svg 文件）的服务是...
https://github.com/briangonzalez/fontprep
http://www.fontsquirrel.com/tools/webfont-generator
That being said, if you REALLY want to assign the font IN the svg you would add the attribute font-family just like you have. Though I wouldn't include the file extension (.ttf) in the naming scheme.
话虽如此，如果您真的想在 svg 中分配字体，您可以像拥有的那样添加属性 font-family。虽然我不会在命名方案中包含文件扩展名 (.ttf)。
回答by user731448156122
Here is how I referenced an SVG font from another SVG file:
以下是我从另一个 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>
