Question

我的情况如下：

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

我试着按如下方式解决这个问题：

＆＃13;

$(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);
    }
});

＆＃13;

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

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

非常感谢任何帮助！

致以最诚挚的问候，

扬

Answer 1

无法使用createElement创建SVG元素（仅适用于HTML）。

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

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

动态地将@ font-face添加到svg

1 个答案: