使用 <link> 异步加载 Google 字体或在没有 Font Face Observer 的情况下延迟加载

Question

我想为我的网站使用 Google 字体 "Noto Serif"。我的问题是，当我使用 Google PageSpeed Insights 对其进行测试时，它告诉我我很完美，除了一件事：

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

Your page has 1 blocking CSS resources. This causes a delay in rendering your page. None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

我知道一个不好的解决方案。 HTML 文件底部使用 <script> 的字体 link。该解决方案的问题在于，每次您在我的网站上单击某些内容时，它都会导致一闪而过的无样式文本。

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

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'" />

Answer 2

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

<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, it's pretty easy to implement. I've learn this from a course I took recently, Responsive Web Design Fundamentals, if you're interested you can check it out here。

Answer 3

只添加区块标签

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

参考：Controlling Font

Answer 4

基于this策略预加载样式表：

<link rel="preload" 
      href="https://fonts..."
      as="style"
      onload="this.onload=null; this.rel='stylesheet'; document.body.classList.add('fontLoaded')">

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body.fontLoaded {
  font-family: 'GOOGLE FONT', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

Answer 5

向您的代码添加两个属性。一个是 rel="preload"，另一个是 as="style"。最终代码如下所示：

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

Answer 6

有人试过吗this solution？

<!-- other <head> stuff -->

<!-- connect to domain of font files -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- optionally increase loading priority -->
<link rel="preload" as="style" href="(font CSS URL here)">

<!-- async CSS -->
<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="(font CSS URL here)">

<!-- no-JS fallback -->
<noscript>
    <link rel="stylesheet" href="(font CSS URL here)">
</noscript>

</head>

Answer 7

非常简单的方法：

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

只需将 styles.css 替换为您的字体 URL。它加载字体，然后一旦完成 (onload)，它通过将 rel 属性切换为 stylesheet.

来“启用”它

更多详情here。

使用 <link> 异步加载 Google 字体或在没有 Font Face Observer 的情况下延迟加载

Load Google Font with <link> asynchronously or deferred without Font Face Observer

css

fonts

asynchronous

jekyll

google-font-api