最快加载的 Google Fonts | CSS-Tricks

当您使用 font-display: swap;（Google Fonts 在您使用 URL 中默认的 &display=swap 部分时会使用此设置）时，您实际上是在说：“我不介意 FOUT”，这意味着网页文本会立即显示，当网页字体准备好后，再“替换”为它。

您正在执行的操作本身就具有异步特性，因此您不妨将这种异步特性扩展到字体加载的其余部分。Harry Roberts

如果您要为 Google Fonts 使用 font-display，那么异步加载整个请求链就很有意义了。

Harry 推荐的代码片段

<link rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin />

<link rel="preload"
      as="style"
      href="$CSS&display=swap" />

<link rel="stylesheet"
      href="$CSS&display=swap"
      media="print" onload="this.media='all'" />

$CSS 是 Google Fonts 提供给您的 URL 的主要部分。

看起来渲染时间节省了约 20%，而加载时的外观/感觉没有变化。除此之外，它更快了。

直接链接 →

评论