纯JS如何导入字体？ [复制]答案

【问题标题】：How to import fonts with pure JS? [duplicate]纯JS如何导入字体？ [复制]
【发布时间】：2017-02-04 00:21:20
【问题描述】：

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

一切正常，但我不知道如何用纯 JS 更改我的 font-family。

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

谢谢！

【问题讨论】：

“我需要完全不使用 CSS 来完成一个网站。” — 如果没有更多上下文，这是一个不合理且荒谬的要求。如果有一个上下文原因证明它是合理的，那么你几乎肯定有一个xy problem，如果不知道这个原因，这个问题就无法得到合理的回答。
"font-family" 用于指定应该使用一组可用字体中的哪一个。 “导入字体”意味着将外部字体文件加载到文档中以使其可用于字体系列。你在说哪个？

标签： javascript fonts

【解决方案1】：

您说“纯 JS”，但很可能您是在询问如何在浏览器环境中执行此操作，这会暴露 Document Object Model or DOM。因此，您可以将它与 Javascript 一起使用。

除非这是一个棘手的家庭作业问题，否则没有理由避免使用 CSS，因为 CSS 始终可用，而且这是设置样式的合适工具。

更改元素的font-family 很简单：

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

现在，要导入字体，只需将样式表或 <style> 元素添加到具有 font-face 规则的 DOM：

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);

There is no other way to do it currently.

【讨论】：

查看您所引用内容之前的文字。
告诉人们他们不应该问他们提出的问题，然后回答另一个问题似乎不是一个很好的答案。
当问题提出一些不可能的问题时，通常会这样做。
不仅如此，你自己也对这个问题发表了同样多的评论。
是的，我评论说这个问题在目前的状态下无法得到合理的回答。这就是我没有尝试回答的原因。

【解决方案2】：

我建议使用 Google 的 Webfontloader，它使用起来非常简单：

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

这将允许您使用由 google here 托管的庞大网络字体库，而无需明确指定 CSS。如果您愿意使用样式标签或 .css 文件，也可以使用自定义字体（或者您可以通过 javascript 注入 @font-face。）还有其他与 Webfontloader 一起使用的 Web 字体提供程序，只需查看在 github 页面上。

如果您有兴趣学习如何在 javascript 中手动执行此操作，任何有关通过 javascript 注入 CSS 的查询都会对您进行排序，但是，从技术上讲，这仍然是使用 CSS。不知道这/那是你想要的。

【讨论】：

谢谢！对我来说最好的方式...
@ZeevKatz — 它不符合您的“无 CSS”要求。
@Quentin 为什么不呢？
@ZeevKatz — 因为它用 JS 注入 CSS。
对不起，我不是更清楚：库在内部修改页面的 CSS，但这对用户是隐藏的。如果您对不必自己显式修改 CSS 感兴趣，并且可以使用兼容的托管 Web 字体，那么此解决方案将起作用。如前所述，如果不从技术上使用 CSS，就无法加载字体。所有 javascript 方法都会修改 CSS。