javascript - 动态添加@font-face到svg

Question

我的情况如下:

该网站应包含我的客户提供的几个 svgs。这些 svgs 包含应以自定义字体呈现的文本。然而，我客户的创作工具在导出过程中并不将字体包含在 svg 中。

我尝试按如下方式解决此问题:

$(document).ready(function(){

    var svgs = document.getElementsByClassName('load-fonts');

    if (svgs.length > 0) {
        setTimeout(function () {
            for(var i = 0; i < svgs.length; i++) {
                var svg   = svgs[i];
                var defs  = document.createElement('defs');
                var sheet = document.createElement('style');
                sheet.type = "text/css";
                sheet.innerHTML = ""
                    + "@font-face {font-family: 'GloberRegular';"
                    + "src: url('/dist/fonts/glober_regular-webfont.eot') "
                    + "url('/dist/fonts/glober_regular-webfont.woff') format('woff');"
                    + "src: url('/dist/fonts/glober_regular-webfont.svg') format('svg');font-weight: normal;font-style: normal;}"
                    + "@font-face {font-family: 'GloberBook';"
                    + "src: url('/dist/fonts/glober_regular-webfont.eot') "
                    + "url('/dist/fonts/glober_regular-webfont.woff') format('woff');"
                    + "src: url('/dist/fonts/glober_regular-webfont.svg') format('svg');font-weight: normal;font-style: normal;}"
                    + "@font-face {font-family: 'GloberBold';"
                    + "src: url('/dist/fonts/glober_bold-webfont.eot') "
                    + "url('/dist/fonts/glober_bold-webfont.woff') format('woff');"
                    + "src: url('/dist/fonts/glober_bold-webfont.svg') format('svg');font-weight: normal;font-style: normal;}"
                    + "@media screen and (min-resolution:0dppx) {@font-face {font-family: 'GloberRegular';src: url('/dist/fonts/glober_regular-webfont.svg') format('svg')};";
                defs.appendChild(sheet);
                svg.contentDocument.getElementsByTagName('svg')[0].appendChild(defs);

                $(sheet).clone().appendTo( svg.contentDocument.getElementsByTagName('svg')[0] );
            }
        }, 200);
    }
});

此方法适用于 Safari，但显然不适用于其他浏览器。我找不到加载字体的修复程序。

另一种选择是批处理这些 svg 文件(使用例如 gulp)并在其中添加字体注释，但我找不到适合该工作的工具链和插件。

任何帮助将不胜感激!

最诚挚的问候，

一月

Answer 1

SVG 元素无法使用 createElement 创建(仅适用于 HTML)。

var defs  = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
var sheet = document.createElementNS('http://www.w3.org/2000/svg', 'style');

我认为 IE 不支持 insideHTML，因此您可能需要将其更改为 textContent 才能在那里工作。