编辑:Issue reported to microsoft
我有一个内联svg元素,该元素带有作为base64字符串(.woff格式)嵌入的自定义字体。
我使用javscript序列化SVG元素,并将其用作 img 元素的源。 Jsbin Link
var svg = document.querySelector('svg');
var svgData = new XMLSerializer().serializeToString(svg);
var img = document.createElement("img");
img.setAttribute("src", "data:image/svg+xml;base64," + btoa(svgData));
document.body.appendChild(img);
svg { width: 400px; max-width:calc(100% - 100px); height: auto; }
img { width: 400px; max-width:calc(100% - 100px); height: auto; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<svg viewBox="0 -23 90 33" width="723" height="276">
<defs>
<style type="text/css">
@font-face {
font-family: 'Butcherman';
src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff');
}
</style>
</defs>
<text x="0.5" y="1" font-size="30" fill="#432329" stroke="#000000" stroke-width="1.2" paint-order="stroke"
font-weight="normal" letter-spacing="1" font-family="Butcherman">Hello</text>
</svg>
<br />
</body>
</html>
自定义字体可以在Chrome,Firefox,IE 11中正确显示,但不能在Edge中显示。
我错过了什么吗?我该怎么做才能使自定义字体在Edge中正确呈现?