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

Question

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

JavaScript有这个功能吗？

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

Answer 1

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…

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

Answer 2

如果您了解 CSS，您可以使用 document.write 动态附加样式表...我想这将算​​作使用 CSS，但它会起作用

Answer 3

除了使用 @font-face 规则之外，没有其他方法可以使浏览器从网络加载字体。理论上，您可以从 JavaScript 创建 @font-face 规则，而无需使用 document.write （或 document.createElement(" style") 等)，如果您使用 CSS 对象模型；但目前我不指望在任何浏览器中实现这一点。

Answer 4

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

Answer 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';
        })

Answer 6

是的，你可以：

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

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

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

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