CSS 使用 <link> 异步加载 Google 字体或在没有 Font Face Observer 的情况下延迟加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40624515/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load Google Font with <link> asynchronously or deferred without Font Face Observer
提问by Stuffed Marshmallow
I am wanting to use the Google Font "Noto Serif" for my website. My problem is that when I test it with Google PageSpeed Insights, it tells me I'm perfect except for one thing:
我想在我的网站上使用 Google 字体“Noto Serif”。我的问题是，当我用 Google PageSpeed Insights 测试它时，它告诉我我很完美，除了一件事：
<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet">
<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.
您的页面有 1 个阻塞 CSS 资源。这会导致呈现页面的延迟。如果不等待以下资源加载，则页面上的所有首屏内容都无法呈现。尝试延迟或异步加载阻塞资源，或直接在 HTML 中内联这些资源的关键部分。
I am aware of a bad solution for this. It's to link the font using <script>at the bottom of the HTML file. The problem with that solution is it causes a Flash of Unstyled Text every time you click on something in my website.
我知道对此有一个不好的解决方案。它用于链接<script>HTML 文件底部的字体。该解决方案的问题在于，每次您单击我网站上的某些内容时，它都会导致无样式文本的闪烁。
I am using jekyll hosted with GitHub Pages, so I don't think I can install Font Face Observer :(
我正在使用由 GitHub Pages 托管的 jekyll，所以我认为我无法安装 Font Face Observer :(
采纳答案by Paddy
Here ya go, include this in the body tag and not the head tag
在这里，将其包含在 body 标签中，而不是 head 标签中
<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet" lazyload>
回答by Mirza Sisic
You can load the web fonts asynchronously with this script:
您可以使用此脚本异步加载 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>
You'll need 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.
你会需要这个库，它很容易实现。我从我最近参加的一门课程中学到了这一点，响应式网页设计基础，如果你有兴趣，你可以在这里查看。
回答by Pavlo Razumovskyi
Based on thisstrategy to preload stylesheets:
基于此策略预加载样式表：
<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;
}
回答by Brayan Cruz
Only add block tag
只添加块标签
https://fonts.googleapis.com/css?family=Noto+Serif&display=block
Ref : Controlling Font
参考：控制字体
