CSS 字体显示：交换阻塞

Question

我正在尝试通过阻止 Google 字体下载阻止页面其余部分的加载来优化我的网站下载速度。也许我误解了 CSS 的 font-display:swap 功能，因为我认为这应该允许字体下载，而不阻止继续下载。

但是，我的 CSS 中的 font-display 标签似乎不允许字体无阻塞地下载。

即，我的 CSS

  @font-face {
        font-family: ...
        format('svg');
        font-weight: normal;
        font-style: normal;
        text-decoration:none;
        font-display:swap;}

但 GTMetrix 瀑布显示该字体仍然阻塞。

瀑布

遮挡细节

我是否误解了显示：交换或误读了瀑布？

Answer 1

css 属性font-display:swap不会阻止页面加载期间的阻塞，它只会在指定的字体尚不可用时显示后备字体。

如果您想优化字体加载，我建议您阅读这篇文章，它解释了如何使用常用的 CSS 链接preconnect或使用自托管字体进行全面优化来优化 google 字体加载。

Answer 2

根据谷歌开发人员的说法：

\n\n

字体交换期 紧随 字体块期之后发生。在此期间，如果未加载字体，则任何尝试使用它的元素都必须使用后备字体进行渲染。如果在交换期间成功加载字体，则可以正常使用该字体。

\n\n

swap 为字体提供了零秒的块周期和无限的交换周期。这意味着如果字体未加载\xe2\x80\x99t，浏览器会立即绘制文本并进行回退，但在加载后立即交换字体。与 block 类似，仅当以特定字体呈现文本对页面很重要时才应使用此值，但以任何字体呈现仍然会得到正确的消息。徽标文本是交换的良好候选者，因为使用合理的后备显示公司\xe2\x80\x99s 名称将传达消息，但你\xe2\x80\x99d 最终使用官方字体。

\n\n

我在你的字体格式 SVG 中看到，我通常使用WOFF 或 WOFF2。也许 SVG 中的特定字体会对您网站的网络性能产生负面影响。

\n