Css 当绘制到Chrome中的img元素时,SVG中的文本没有使用正确的字体
使用字体系列在SVG中呈现文本时,Chrome 32.0.1700.107将选择适当的字体。但是,如果我使用相同的SVG作为img元素的输入,则会使用错误的字体。如果我指定了一种我知道在我的系统上的特定字体,那么该字体在svg和img元素中都会正确呈现。一个简单的例子:Css 当绘制到Chrome中的img元素时,SVG中的文本没有使用正确的字体,css,google-chrome,svg,font-family,Css,Google Chrome,Svg,Font Family,使用字体系列在SVG中呈现文本时,Chrome 32.0.1700.107将选择适当的字体。但是,如果我使用相同的SVG作为img元素的输入,则会使用错误的字体。如果我指定了一种我知道在我的系统上的特定字体,那么该字体在svg和img元素中都会正确呈现。一个简单的例子: <svg id="scalingSvg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"> <rect
<svg id="scalingSvg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
<rect width="99%" height="99%" fill="white" stroke="black"/>
<text id="myText" x="50%" y="50%" font-family = "monospace" font-size = "24">M~</text>
</svg>
<img id="svgImage" x="0" y="0" height="100" width="100"/>
var xml = (new XMLSerializer).serializeToString(svg);
img.src = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(xml);
M~
在这里。下拉列表有通用字体系列,但也有特定字体。特别是,如果您将下拉菜单设置为Courier New,结果将是我所期望的-字体在两个图像中都正确呈现。但是如果将字体更改为“monospace”,SVG元素将正确地找到新的字体,而img元素将以不正确的非monospace字体呈现
IE、Firefox和Safari都可以正常工作——在svg和img元素中都可以找到适合字体系列的字体。我是否在Chrome中发现了一个bug,或者在指定我不知道的字体时有什么微妙之处?这看起来与:希伯来文文本不在SVGImage中呈现(在SVG DOM中呈现)”。SVGImage具有内联SVG呈现程序没有的源限制:
注释#3:不允许SVGImages加载外部资源,但我猜它们不允许加载缓存资源
注释4:我们认为字体是外部资源吗?我想是的。如果html中包含嵌入或对象,则此测试不起作用
似乎这可能是Chrome中的一个bug。你应该报告。