javascript - 带有 base64 嵌入字体的序列化 SVG 图像，在 IE Edge 中无法正确呈现

问题描述

我有一个带有自定义字体的内联 svg 元素，它嵌入为 base64 字符串（.woff 格式）。

使用 javscript，我正在序列化 SVG 元素并将其用作img元素的源。Jsbin 链接

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 中正确呈现？

标签： javascripthtmlinternet-explorersvgmicrosoft-edge

javascript - 带有 base64 嵌入字体的序列化 SVG 图像，在 IE Edge 中无法正确呈现

问题描述

解决方案

推荐阅读