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 瀑布显示此字体仍然阻塞。

瀑布

阻止详细信息

我是不是误解了 display:swap 或误读了瀑布？

Answer 1

根据Google devs:

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

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

我看你的字体格式是SVG，我一般用WOFF or WOFF2。也许 SVG 中的特定字体会对您网站的网络性能产生负面影响。

Answer 2

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

如果你想优化字体加载，我推荐你 read this post，它解释了如何使用通常的 CSS link 优化 google 字体加载 link =11=] 或使用自托管字体进行全面优化。

CSS 字体显示：交换阻塞

CSS Font-display:swap blocking

css

gtmetrix