通过JavaScript更改字体

Question

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

1. 字体的异步文件上传(已经完成).

2. 获取URL(完成).

3. 将字体更改为新URL.

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

Answer 1

您可以<style>使用@font-face规则创建一个新元素并将其附加到document's head:

var newStyle = document.createElement('style');
newStyle.appendChild(document.createTextNode("\
@font-face {\
    font-family: " + yourFontName + ";\
    src: url('" + yourFontURL + "') format('yourFontFormat');\
}\
"));

document.head.appendChild(newStyle);

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

Answer 2

定义一个FontFace对象：

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

调用其load方法下载字体：

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

}).catch(function(error) {

});

...这将返回一个Promise，该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"
})