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

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

每个字体只有fontFamily和url

看起来WebFontLoader有一个使用.css文件加载字体的选项，如：

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

有没有一种方法不使用.css文件，而是使用字体文件的直接路径

---

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

加载和检测我发现的字体已加载的唯一可能方法是创建

元素，其中包含

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