如何使用 Font Face Observer 异步加载 Google 字体答案

【问题标题】：How to load Google fonts asynchronously with Font Face Observer如何使用 Font Face Observer 异步加载 Google 字体
【发布时间】：2016-10-21 13:49:35
【问题描述】：

在阅读了 this article 关于提供网络字体的最佳方法之后，我想利用最近的 JavaScript 库 Font Face Observer 在我的网站上异步加载 Google 字体。

documentation 写道“字体可以由 [...] 字体服务（例如 Google 字体）提供”，但它没有显示任何有关如何实际实现此功能的示例。我已经阅读了official website 上列出的有关 Font Face Observer 的推荐文章，但所有文章都展示了如何将其与自托管字体一起使用。

有人使用 Font Face Observer 加载 Google 字体吗？或者，您能否指出一些说明如何处理此问题的文档？

【问题讨论】：

我不明白为什么它自称为 loader。浏览器加载字体。据我所知，它所做的只是告诉你它们何时加载。
@T.J.Crowder 它有一个.load() 方法。它还告诉您何时加载字体并将类更改为您的正文文本以避免 FOIT。在您看来，Google/Typekit 网络字体加载器是否仍然是加载字体的最佳异步方式？
是的，看到他们在首页示例中使用的load方法，但是首页的CSS会加载字体无论如何，所以我没有了解load 的用途。最好的方法：我没有资格对此发表意见。但是...字体是异步加载的默认情况下。我还没有觉得有必要控制这个过程。但是，显然人们会这样做，因此必须有用例。
@T.J.Crowder 你说得对——我从来没有用过@font-face，但现在我一想到你在css中写了它，它就会自动加载字体。 Re Re 最好的方法：即使字体默认是异步加载的，它们仍然是渲染阻塞的——这就是人们想要控制进程的原因。
啊，当然！这绝对解释了想要通知。

标签： javascript css fonts webfonts google-webfonts

【解决方案1】：

我使用这种方法来实现字体延迟加载。您必须确保将您的 Google 字体添加到样式表链接。之后像往常一样使用FontFaceObserver - 只需将 Google 字体名称作为参数传递来创建一个新的 FontFaceObserver 实例。为了管理我的 Google 字体，我使用了一个小助手 google-fonts。

代码示例如下所示：

import googleFonts from 'google-fonts';
import FontFaceObserver from 'fontfaceobserver';

loadGoogleFont(fontName) {
    googleFonts.add({[fontName]: true}); // or some other options if you need
    const fontObserver = new FontFaceObserver(fontName);
    return fontObserver.load()
        .catch(err => console.log(fontName, err));
}

【讨论】：

这有助于我找到正确的解决方案，谢谢！

【解决方案2】：

这是我使用它的一种相当简单的方法，但我不确定它是否是最好的方法。这种方法可能很好的原因是字体加载不会阻止渲染，因为最后我的 JS 文件中有脚本。所以基本上我会在我的 JS 文件开始解析后立即开始加载字体，并在加载后立即渲染。

import FontFaceObserver from 'fontfaceobserver'
import loadCSS from './util/loadCSS'

loadCSS('//fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700')
const opensans = new FontFaceObserver('Open Sans')
opensans.load().then(() => document.body.classList.add('fonts--loaded'))

【讨论】：