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。

我正在使用jityll托管GitHub页面，所以我认为我不能安装Font Face Observer :(

Answer 1

您可以使用此脚本异步加载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 2

在这里，将其包含在body标签中，而不是头标签

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

Answer 3

仅添加阻止标签

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

Ref：Controlling Font

Answer 4

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

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

Answer 5

基于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 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>

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

6 个答案: