5

我试图通过阻止谷歌字体下载阻止页面的其余部分加载来优化我的网站下载速度。也许我误解了 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 瀑布显示该字体仍处于阻塞状态。

瀑布 在此处输入图像描述

阻挡细节

在此处输入图像描述

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

4

2 回答 2

5

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

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

于 2020-06-16T02:22:39.890 回答
3

根据Google 开发人员的说法：

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

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

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

于 2020-06-16T02:05:41.813 回答