Css 使用<；链接>；不使用字体观察者异步或延迟_Css_Asynchronous_Fonts_Jekyll_Google Font Api

Css 使用<；链接>；不使用字体观察者异步或延迟

css asynchronous fonts jekyll

Css 使用<；链接>；不使用字体观察者异步或延迟,css,asynchronous,fonts,jekyll,google-font-api,Css,Asynchronous,Fonts,Jekyll,Google Font Api,我想在我的网站上使用谷歌字体“Noto Serif”。我的问题是，当我用Google PageSpeed Insights测试它时，它告诉我我是完美的，除了一件事：您的页面有1个阻止CSS资源。这会导致工作延迟呈现页面。以上任何一项都不会影响页面上的折叠内容可以在不等待加载以下资源的情况下呈现。尝试延迟或异步加载阻塞资源，或内联这些资源的关键部分直接放在HTML中我知道有一个不好的解决办法。它是使用HTML文件底部的链接字体。这种解决方案的问题是，每次你点击我的网站上的某个东西时

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

您的页面有1个阻止CSS资源。这会导致工作延迟呈现页面。以上任何一项都不会影响页面上的折叠内容可以在不等待加载以下资源的情况下呈现。尝试延迟或异步加载阻塞资源，或内联这些资源的关键部分直接放在HTML中

我知道有一个不好的解决办法。它是使用HTML文件底部的

链接字体。这种解决方案的问题是，每次你点击我的网站上的某个东西时，它都会导致未格式化的文本闪烁

我使用的是GitHub页面托管的jekyll，因此我认为我无法安装Font-Face Observer:（

在这里，将其包含在body标记中，而不是head标记中

更新至2020年

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

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


WebFontConfig={
typekit:{id:'xxxxxx'}
};
（职能（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）；
})（文件）；

您将需要，它非常容易实现。我从最近参加的一门课程“响应式网页设计基础”中学到了这一点，如果您感兴趣，可以查看。

仅添加块标记

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

参考：

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

正文{
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
}
body.fontload{
字体系列：“谷歌字体”、“Helvetica Neue”、Helvetica、Arial、无衬线字体；
}

为代码添加两个属性。一个是

rel=“preload”

，另一个是

as=“style”

。最终代码如下所示：

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

有人试过吗

出于所有明显的原因，请使用localfont.com…@StuffedMarshm允许“懒散负载”属性来自一个废弃的W3C提案，并且。我不建议在公共网站上使用它。要在所有浏览器中异步加载Google字体，您应该使用。要证明soren的评论，请检查，您会发现他是正确的。因此，不要在您的生产环境中使用此解决方案。自2020年10月起@Pavlo Razumovskyi ha这是正确的答案，请使用它，因为这也是我现在使用的。库（webfontloader）似乎是。也有一些人有。我对使用它有疑问。感谢你的提醒和编辑，我已经有一年没有使用它了。请记住，当禁用JavaScript时，这将阻止字体加载。从你提供的链接：“block给字体一个短的block周期（大多数情况下建议使用3s）换言之，如果字体未加载，浏览器首先会绘制“不可见”文本，但一旦加载，就会立即交换字体。这意味着它将导致不可避免的FOIT。您认为这会影响google fonts API提供的交换显示类型吗？。google fonts为Roboto font提供此URL

https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap

@pavlo请记住，这还没有完全支持，并且样式不会到处加载：

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

<!-- 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>