我正在尝试通过阻止 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 瀑布显示此字体仍处于阻塞状态。
屏蔽细节
我是否误解了显示：交换或误读了瀑布？
【问题讨论】：
css 属性font-display:swap 不会阻止页面加载期间的阻塞，它只会在指定的字体不可用时显示备用字体。
如果你想优化字体加载，我推荐你 read this post，它解释了如何使用 preconnect 的常用 CSS 链接优化 google 字体加载或使用自托管字体进行全面优化。
【讨论】：
字体交换期 紧接在 字体阻止期之后。在此期间，如果未加载字体，则任何尝试使用它的元素都必须使用后备字体进行渲染。如果字体在交换期间成功加载，则字体将正常使用。
swap 给字体表面一个零秒的块周期和一个无限的交换周期。这意味着如果字体未加载，浏览器会立即使用回退绘制文本，但在加载后立即交换字体。与 block 类似，该值仅应在以特定字体呈现文本对页面很重要时使用，但以任何字体呈现仍会得到正确的消息。徽标文本是一个很好的交换候选者，因为使用合理的后备显示公司名称会传达信息，但您最终会使用官方字体。
我在您的字体格式中看到 SVG，我通常使用 WOFF or WOFF2。也许 SVG 中的特定字体会对您网站的网络性能产生负面影响。
【讨论】：