使用< link>加载Google字体异步或推迟没有字体面部观察者 [英] Load Google Font with <link> asynchronously or deferred without Font Face Observer
问题描述
我想用Google字体Noto Serif作为我的网站。
我的问题是，当我使用Google PageSpeed Insights进行测试时，它告诉我我是完美的，除了一件事：
< link href =https://fonts.googleapis.com/css?family=Noto+Serif =stylesheet>
您的页面有1个阻止CSS资源。这会导致
渲染页面的延迟。没有任何页面上的折叠内容
可以被渲染而不需要等待下面的资源加载。
尝试推迟或异步加载阻塞资源，或直接在HTML中嵌入这些资源的
关键部分。
我知道这是一个不好的解决方案。它是在HTML文件的底部使用< script> 链接字体。这个解决方案的问题是，每当你点击我的网站上的东西，它会导致一个Flash的Unstyled Text。
我使用的是用GitHub Pages托管的jekyll，我想可以安装Font Face Observer：（
）标记
< link href =https://fonts.googleapis.com/css?family=Noto+Serif =stylesheetlazyload>
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:
<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.
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.
I am using jekyll hosted with GitHub Pages, so I don't think I can install Font Face Observer :(
Here ya go, include this in the body tag and not the head tag
<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet" lazyload>
这篇关于使用< link>加载Google字体异步或推迟没有字体面部观察者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
