如何通过 url 使用 Google WebFontLoader 加载自定义字体

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

如何通过 url 使用 Google WebFontLoader 加载自定义字体

How to load custom fonts by url using Google WebFontLoader

javascript

fonts

webfont-loader