CSS字体显示:交换阻塞

Question

我试图优化我的网站下载速度，阻止谷歌字体下载阻止页面的其余部分加载。也许我误解了CSS的字体显示:交换功能，因为我认为这应该允许字体下载，而不会阻止继续下载。

但是，我的CSS中的字体显示标记似乎不允许不阻塞地下载字体。

也就是说，我的CSS

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

但是GTMetrix瀑布显示这种字体仍然是阻塞的。

瀑布

​

阻塞细节

​

​

我是否误解了这个展示:交换还是误读瀑布？

Answer 1

根据Google：

字体交换周期立即发生在字体块周期之后。在此期间，如果字体面板未加载，任何试图使用该字体的元素都必须使用回退字体面进行呈现。如果字体面板在交换期间成功加载，则字体面板将被正常使用。

交换给字体表面一个零秒块周期和一个无限交换周期。这意味着，如果字体面板未加载，浏览器将立即绘制文本，但一旦加载字体面板，浏览器就会立即将其替换进去。与块类似，此值仅在呈现特定字体的文本对页面非常重要时使用，但任何字体的呈现仍将得到正确的消息。徽标文本是一个很好的交换选择，因为使用合理的后盾显示一个公司的名称会让信息被传递，但是你最终会使用正式的字体。

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

Answer 2

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

如果您想优化我建议您使用的读这篇文章加载的字体，那么它将解释如何使用通常使用preconnect的CSS链接优化Google字体加载，或者使用自托管字体进行完全优化。