javascript - 如何使用 Font Face Observer 异步加载 Google 字体

Question

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

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

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

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