在HTML内部时，SVG不使用字体 [英] SVG doesn't use font when inside HTML
问题描述
我有一个在Chrome中显示正常的SVG，但当我在HTML页面中使用它时，它不会使用正确的字体，而是使用默认的字体。
< svg version =1.1xmlns =http://www.w3.org/2000/svg>
< defs>
< style type =text / css>
<！[CDATA [
/ * latin-ext * /
@ font-face {
font-family：'Roboto-Black';
src：url（./ Roboto-Black.ttf）
}
]]>
< / style>
< / defs>
< text style =font-family：'Roboto-Black'; font-weight：normal; transform =matrix（1,0,0,1,239.2,51.394）>
< tspan x = - 101.469y =27font-family =Roboto-Blackfont-size =72fill =＃000000> TEST< / tspan>
< / text>
< / svg>
在Chrome中SVG显示效果不错，但是当显示在HTML页面中时，正确的字体。
< html>
< head>< / head>
< body>
< img src =test.svgwidth =100％>
< / body>
< / html>
我缺少什么？
附录：
虽然下面提供了一个有效的解决方案，但是我发现将svg代码直接包含在html中，而不是引用svg文件更容易。这样就不会出现这个问题。
当用作图片时（通过html < ; img> 标签，一个SVG < image>标签或者一个CSS背景图片）SVG必须按顺序包含一个文件以保护用户的隐私。
您可以使用字体，但您需要将字体数据转换为 data URI 并将字体嵌入到SVG文件中。
I have an SVG that displays fine in Chrome, but when I use it in an HTML page, it doesn't use the right font, instead using the default.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<style type="text/css">
<![CDATA[
/* latin-ext */
@font-face {
font-family: 'Roboto-Black';
src: url(./Roboto-Black.ttf)
}
]]>
</style>
</defs>
<text style="font-family: 'Roboto-Black'; font-weight:normal;" transform="matrix(1, 0, 0, 1, 239.2, 51.394)">
<tspan x="-101.469" y="27" font-family="Roboto-Black" font-size="72" fill="#000000">TEST</tspan>
</text>
</svg>
The SVG displays fine in Chrome, but when displayed in an HTML page, it doesn't use the right font.
<html>
<head></head>
<body>
<img src="test.svg" width="100%">
</body>
</html>
What am I missing?
Addendum: Although a valid solution was offered below, I found it was easier to include the svg code directly in the html, instead of referencing an svg file. That way the problem doesn't arise.
When used as an image (via an html <img> tag, an SVG <image> tag or as a CSS background-image) SVG must be consist of a single file in order to protect user privacy.
You can use a font, but you'll need to convert the font data to a data URI and embed the font in the SVG file.
这篇关于在HTML内部时，SVG不使用字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
