Question

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

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

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

Answer 1

这是我使用它的一种相当简单的方法，但我不确定它是否是最佳方式。这种方法可能很好的原因是字体加载不会阻止渲染，因为我最后在我的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'))

Answer 2

我使用这种方法来实现字体的延迟加载。您必须确保将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));
}

如何使用Font Face Observer

2 个答案: