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

Question

CSS 有一个

@font-face

规则，允许我们“使用”自定义字体。

JavaScript 有这个功能吗？

更具体地说，是否可以在不使用 CSS

@font-face

规则的情况下“使用”自定义字体？

Answer 1

如果你知道 CSS，你可以使用

document.write

动态附加样式表......我想这可以算作使用 CSS，但它会起作用

Answer 2

除了

@font-face

规则外，没有办法让浏览器从网络加载字体。如果您使用 CSS 对象模型，您可以

理论上

从 JavaScript 创建

@font-face

规则而不必使用

document.write

（或 document.createElement("style") 等）；但目前我不指望在任何浏览器中实现它。

Answer 3

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

Answer 4

有一项实验技术“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';
        })

Answer 5

是的，你可以：

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

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

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

这确实 NOT 向页面添加字体样式。为此你可能必须使用 CSS

Answer 6

2023 年更新：使用

FontFace

如在 MDN 上的CSS 字体加载 API 上找到的：

const url_to_font_name = 'URL to font'
const font_name = new FontFace('Font Name', `url(${url_to_font_name})`);
document.fonts.add(font_name);
// Work that does not require `font_name` to be loaded…
await font_name.load()
// Work that requires `font_name` to be loaded…

我将

url_to_font_name

变量分开，以表明它可以是 动态生成的字符串。这是 最大的好处 与 CSS 相比，我看到使用 JavaScript 加载字体。