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