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

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