字体面通过JavaScript改变(Font-Face changing via JavaScrip

2019-06-26 02:41发布

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

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

  2. 获取URL(完成)。

  3. 将字体更改为新的URL。

我知道这需要通过字体面做的,但我似乎无法弄清楚如何访问通过JavaScript。

Answer 1:

您可以创建一个新<style>与元素@font-face的规则,并将它添加到documenthead

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) {

});

...这会返回一个承诺,其解决了当通过加载的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"
})


文章来源: Font-Face changing via JavaScript