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

Question

CSS有一条@font-face规则允许我们"使用"自定义字体.

JavaScript有这个功能吗？

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

Answer 1

2023 年更新：使用FontFace

\n

正如MDN 上的 CSS Font Loading API所示：

\n

const url_to_font_name = \'URL to font\'\nconst font_name = new FontFace(\'Font Name\', `url(${url_to_font_name})`);\ndocument.fonts.add(font_name);\n// Work that does not require `font_name` to be loaded\xe2\x80\xa6\nawait font_name.load()\n// Work that requires `font_name` to be loaded\xe2\x80\xa6\n

\n

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

\n

Answer 2

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