如何使用 JavaScript 导入字体文件？答案

【问题标题】：How to import font file using JavaScript?如何使用 JavaScript 导入字体文件？
【发布时间】：2011-04-07 19:57:38
【问题描述】：

CSS 有一个@font-face 规则，它允许我们“使用”自定义字体。

JavaScript 有这个功能吗？

更具体地说，是否可以在不使用 CSS @font-face 规则的情况下“使用”自定义字体？

【问题讨论】：

标签： javascript web font-face webfonts

【解决方案1】：

如果你知道 CSS，你可以使用 document.write 动态附加样式表...我猜这会算作使用 CSS，但它会起作用

【讨论】：

嘿，这很酷，但还有其他选择吗？（或更清洁的黑客）
好吧，我对 JavaScript 不太了解，所以我现在能想到的确实是这个。

【解决方案2】：

除了@font-face 规则外，没有其他方法可以使浏览器从网络加载字体。您可以理论上从 JavaScript 创建 @font-face 规则，而不必使用 document.write（或 document.createElement("style") 等），如果您使用 CSS Object Model;但目前我不指望它会在任何浏览器中实现。

【讨论】：

【解决方案3】：

没有。没有。 Javascript 可以操作 DOM，但它不关心格式。

【讨论】：

【解决方案4】：

是的，你可以：

document.body.style.fontFamily = '...';

这是一个小提琴：http://jsfiddle.net/maniator/QMZ8N/

这只会为元素添加预定义的字体。

这不会向页面添加字体样式。为此，您可能必须使用 CSS

【讨论】：

“是的，你可以”但这不是问题要问的。

【解决方案5】：

有一项实验技术"CSS Font Loading API" 允许在javascript 中加载和使用字体。目前在 chrome 和 firefox 工作。

fetch('/static/media/ProximaNova-Regular.otf')
        .then(resp => resp.arrayBuffer())
        .then(font => {
            const fontFace = new FontFace('Proxima-Nova', font);
            document.fonts.add(fontFace);
            document.body.style.fontFamily = '"Proxima-Nova", Arial';
        })

【讨论】：