如何使用纯JS导入字体？

Question

我需要完成一个网站，完全不使用 CSS。

一切都很顺利，但我不知道如何使用纯 JS 来更改我的 font-family。

有人知道如何仅使用 JS 导入字体吗？

谢谢！

- Zeev Katz

---

没有更多的上下文，这是一个不合理且毫无意义的要求。如果存在可以证明其合理性的上下文原因，那么你几乎肯定面临着一个 XY 问题，而在不了解该原因的情况下，很难对这个问题给与合理的回答。 - Quentin

"font-family" 用于指定应使用一组“可用”字体中的哪一个。 "导入字体" 意味着将外部字体文件加载到文档中，以使其可用于 "font-family"。你在说哪一个？ - Quentin

Answer 1

你说“纯JS”，但很可能你想知道如何在浏览器环境下进行操作，这会暴露出文档对象模型（DOM）。因此，你可以使用Javascript来完成。

除非这是一个有诡计的作业问题，否则没有理由避免使用CSS，因为CSS始终可用并且是正确的工具来设置样式。

更改元素的font-family很容易：

element.style.fontFamily = "Arial, Sans Serif";

现在，要导入字体，只需向DOM添加一个样式表或<style>元素，其中包含一个font-face规则：

var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', 'https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700');
document.head.appendChild(link);

目前没有其他方法可以做到这一点。

- Gregory Magarshak

---

请查看您引用的文本之前的内容。 - Gregory Magarshak

告诉别人他们不应该问他们所问的问题，然后回答一个完全不同的问题，似乎不是一个很好的回答。 - Quentin

当问题要求不可能的东西时，这通常是做不到的。 - Gregory Magarshak

不仅如此，而且您自己也在那个问题上发表了评论。 - Gregory Magarshak

是的，我发表了评论，认为这个问题在目前的状态下无法合理回答。这就是为什么我没有试图回答它的原因。 - Quentin

"没有理由避免使用 CSS" - 如果您需要加载包含字体的应用程序配置，您会更愿意将配置复制到 CSS 中吗？ - ESR

Answer 2

我建议使用谷歌的Webfontloader，它非常简单易用：

Webfontloader 。

WebFont.load({
    google: {
        families: ['Droid Sans', 'Droid Serif']
    }
});

这个功能可以让您使用由谷歌托管的庞大网络字体库，在不需要显式指定CSS的情况下在这里使用。如果您愿意使用样式标签或.css文件（或者您可以通过JavaScript注入@font-face），您也可以使用自定义字体。还有其他与Webfontloader一起工作的Web字体提供商，只需在GitHub页面上查看即可。如果您有兴趣学习如何在JavaScript中手动执行此操作，任何通过JavaScript注入CSS的查询都将为您解决问题，但是，那仍然是使用CSS。我不确定这是否符合您的要求。

- jconder

---

谢谢！对我来说最好的方式是... - Zeev Katz

@ZeevKatz - 它不符合您的“无CSS”要求。 - Quentin

@Quentin 为什么不呢？ - Zeev Katz

@ZeevKatz — 因为它使用 JS 注入 CSS。 - Quentin

对不起，我没有表达清楚：库在内部修改页面的CSS，但用户看不到这一点。如果您不想显式修改CSS，并且愿意使用兼容托管网络字体，则此解决方案将有效。正如已经指出的那样，没有办法在不技术上使用CSS的情况下加载字体。所有JavaScript方法都会修改CSS。 - jconder