在SVG中使用font-family渲染文本时,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 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);
这是在jsfiddle上的代码。下拉框有通用字体系列,也有特定字体。特别地,如果您将下拉框设置为Courier New,则结果符合预期 - 字体在两个图像中都正确呈现。但是,如果将字体更改为“monospace”,则SVG元素将正确找到Courier New,而img元素将以不正确的非等宽字体呈现。IE、Firefox和Safari都按照我的预期工作 - 在svg和img元素中都找到了适当的字体系列。我是否发现了Chrome的一个错误,还是我没有理解指定字体的微妙之处?