Question

所以基本的工作流程是这样的：

字体的异步文件上传（已经完成）。
获取网址（已完成）。
将字体更改为新网址。

我意识到这需要通过font-face完成，但我似乎无法弄清楚如何通过JavaScript访问它。

Answer 1

您可以使用<style>规则创建新的@font-face元素，并将其附加到document的{{1}}：

head

当然，您可能还需要提供所有必要的字体格式和URL，除非您只担心对现代桌面浏览器的支持（在这种情况下您只需使用WOFF - 我认为这是合理的，因为你提到的其他功能。）

Answer 2

定义FontFace对象：

new_font = new FontFace('conthrax', 'url(fonts/conthrax-sb.ttf)')

调用其加载方法以下载字体：

new_font.load().then(function(loaded_face) {
    // use font here

}).catch(function(error) {

});

...这将返回一个Promise，在解析后会通过加载的FontFace。

将加载的字体添加到文档中：

new_font.load().then(function(loaded_face) {
    // use font here
    document.fonts.add(loaded_face)
}).catch(function(error) {

});

根据需要使用字体（例如，在Azle中使用）：

az.style_text('my_title', 1, {
    "font-family" : "conthrax"
})

Answer 3

尝试这样的事情：

let font = new FontFace("ExampleFont", 'url(ExampleFont.woff2) format("woff2")');
font.load().then(function(loadedFont)
{
    document.fonts.add(loadedFont);
    //do something after the font is loaded
}).catch(function(error) {
    // error occurred
});

通过JavaScript更改字体

3 个答案: