加载Google字体 没有Font Face Observer的异步或延迟

Question

我想在我的网站上使用Google字体“Noto Serif”。我的问题是，当我使用Google PageSpeed Insights进行测试时，它告诉我除了一件事之外我是完美的：

<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet">

您的页面有1个阻止的CSS资源。这会导致呈现页面的延迟。在不等待加载以下资源的情况下，无法呈现页面上的上述内容。尝试推迟或异步加载阻止资源，或直接在HTML中内联这些资源的关键部分。

我知道这是一个糟糕的解决方案。它是使用HTML文件底部的<script>链接字体。该解决方案的问题是，每当您点击我网站上的某些内容时，它都会导致无格式文本的Flash。

我使用jekyll托管与GitHub页面，所以我不认为我可以安装Font Face Observer :(

Answer 1

在这里，你可以在body标签中包含它，而不是head标签

<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet" lazyload>

Answer 2

您可以使用此脚本异步加载Web字体：

<script>
   WebFontConfig = {
      typekit: { id: 'xxxxxx' }
   };

   (function(d) {
      var wf = d.createElement('script'), s = d.scripts[0];
      wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
      wf.async = true;
      s.parentNode.insertBefore(wf, s);
   })(document);
</script>

你需要this library，它很容易实现。我从最近的一门课程中学到了这一点，响应式网页设计基础知识，如果你有兴趣，可以查看here。

Answer 3

只添加块标记

 https://fonts.googleapis.com/css?family=Noto+Serif&display=block

参考：Controlling Font