使用 <link> 异步加载 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> 链接字体。该解决方案的问题在于，每次单击我网站中的某些内容时，它都会导致无样式文本闪烁。

我正在使用 GitHub Pages 托管的 jekyll，所以我认为我无法安装 Font Face Observer :(

原文由 oatmealNUGGY 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

来吧，把它包含在body标签而不是head标签中

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

2020 年更新

 <link rel="preload" as="style" href="https://yourcss.css" onload="this.rel='stylesheet'" />

原文由 Paddy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

非常简单的方法：

 <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

只需将 styles.css 替换为您的字体 URL。它加载字体，然后一旦完成（ onload ）它通过将 rel 属性切换为 stylesheet 来“启用”它。

更多细节 在这里。

原文由 joe 发布，翻译遵循 CC BY-SA 4.0 许可协议