异步加载 Google 字体的非 JS 解决方案答案

【问题标题】：Non-JS solutions to asynchronously load Google Fonts异步加载 Google 字体的非 JS 解决方案
【发布时间】：2018-03-03 10:36:48
【问题描述】：

我知道异步/非阻塞加载 Google 字体的一种方法是使用他们的JavaScript Web Font Loader。但是，他们有任何非 JS（最好是 HTML/CSS）的解决方案吗？

一种非 JS 方法是在用于导入 Google 字体的标签末尾添加 lazyload。但是这个属性isn't 普遍支持（远非如此）。那么我们还能做得更好吗？

如果除了使用 JS 解决方案之外别无他法，我也会接受它作为答案。

【问题讨论】：

标签： css webfonts pagespeed google-webfonts google-pagespeed

【解决方案1】：

我认为comment by soren121 on a related question 总结得差不多了：

“lazyload”属性来自一个废弃的 W3C 提案和it was only implemented by Internet Explorer and Edge。我不建议在公共网站上使用它。要在所有浏览器中异步加载 Google 字体，您应该使用 Their JavaScript Web Font Loader。

我也可以说，不使用 JavaScript 就无法异步加载字体。

【讨论】：

我正在处理一个 Web 应用程序，其中不可忽视的大量用户没有 JS（因为源自 JS 剥离转发代理）。我想要一个强大的解决方法。可惜没有别的了。
@HassanBaig 我希望我能给你一个解决方法，但是有效的缓存会在用户第一次访问后快速加载字体并将链接移动到正文的末尾会防止渲染阻塞。
如我应该将<link> 标签移动到正文的末尾？如果这有效地防止了渲染阻塞，那么这个“解决方案”在什么意义上落后于 Web 字体加载器的 JS 实现？其次，我猜测静态资产无论如何都会被浏览器缓存，所以我没有采取任何特殊措施来缓存字体。如果我要这样做，我应该采取什么样的措施来确保有效的缓存？
@HassanBaig 是的，如果您将 <link> 标记移动到正文的末尾，则在正文已渲染后将加载字体，但这将导致正文以一种字体呈现首先，然后与另一个。 ETag 和 Last-Modified 应该由您的服务器软件为这些类型的资产自动发送，但是由于您提到您的网站位于反向代理后面，也许您可以告诉它缓存以及如果它还没有缓存。
嗯，所以基本上我应该在我的 nginx 虚拟主机文件中设置这些（可能是与静态资产相关的 location 块）。