通过 JavaScript 更改字体答案

【问题标题】：Font-Face changing via JavaScript通过 JavaScript 更改字体
【发布时间】：2012-07-06 11:54:18
【问题描述】：

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

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

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

【问题讨论】：

github.com/typekit/webfontloader

标签： javascript css fonts font-face

【解决方案1】：

您可以使用@font-face 规则创建一个新的<style> 元素并将其附加到document 的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——我认为这是合理的，因为你提到的其他功能）。

【讨论】：

现在，我明白了。我在想他的意思是带有 face 属性的 html 标签并且他想用 Javascript 编写它。 +1

【解决方案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) {

});

【讨论】：

【解决方案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
});

【讨论】：

【解决方案4】：

使用 js 在文档中创建样式元素，然后将 TextNode 子元素附加到它。简单功能：

function loadFont(name,url){
    var newStyle = document.createElement('style');
    newStyle.appendChild(document.createTextNode('@font-face{font-family: '+name+'; src: url('+url+');}'));
    document.body.appendChild(newStyle)
}

使用示例：

loadFont("bonbon","fonts/bonbon.ttf");

【讨论】：