Question

我需要使用WebFontLoader按需在运行时加载字体（.ttf，.otf）。

每种字体都只有fontFamily和url。

看起来WebFontLoader可以选择使用.css文件加载字体，如：

WebFont.load({
    custom: {
        families: [
            'font-family-name'
        ],
        urls: [
            'path-to-css'
        ]
    }
});

有没有办法在没有.css文件的情况下使用直接路径到字体文件？

我不想使用任何外部网站来存储我的字体文件。

Answer 1

加载加载和检测该字体的唯一可能方法是加载我找到的是在<style>内创建@font-face元素并将其添加到DOM中。

let markup = [
        '@font-face {\n',
        '\tfont-family: \'', font-family-name, '\';\n',
        '\tfont-style: \'normal\';\n',
        '\tfont-weight: \'normal\';\n',
        '\tsrc: url(\'', font-file-url, '\');\n',
        '}\n'
    ].join('');
});

let style =  document.createElement('style');
style.setAttribute('type', 'text/css');
style.innerHTML = markup;

然后你可以使用WebFontLoader来监听事件：

WebFont.load({
    custom: {
        families: [
            'font-family-name'
        ],
        active: () => {
            //triggers when font has been loaded successfully
        },
        inactive: () => {
            //triggers when font loading failed
        }
    }
});

如何使用Google WebFontLoader按网址加载自定义字体

1 个答案: