CSS字体显示:交换阻塞

CSS字体显示:交换阻塞,css,gtmetrix,Css,Gtmetrix,我正试图通过阻止谷歌字体下载阻止页面的其余部分加载来优化我的网站下载速度。也许我误解了CSS的字体显示:交换功能,因为我认为这应该允许下载字体,而不阻止继续下载 但是,我的CSS中的字体显示标签似乎不允许在不阻塞的情况下下载字体 例如,我的CSS @font-face { font-family: ... format('svg'); font-weight: normal; font-style: normal;

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

但是,我的CSS中的字体显示标签似乎不允许在不阻塞的情况下下载字体

例如,我的CSS

  @font-face {
        font-family: ...
        format('svg');
        font-weight: normal;
        font-style: normal;
        text-decoration:none;
        font-display:swap;}
但是GTMetrix瀑布显示,这种字体仍然处于阻塞状态

瀑布

块细节

我是否误解了显示:交换或误读瀑布?

根据

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

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


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

css属性
字体显示:swap
不会阻止页面加载期间的阻塞,它只会在指定字体不可用时显示回退字体


如果你想优化字体加载,我推荐你,它解释了如何使用常用的CSS链接使用
preconnect
优化谷歌字体加载,或者使用自托管字体进行全面优化。

谢谢你的澄清。我已经添加了预连接。谢谢。CSS是自动生成的,包括WOFF、SVG和其他2个。你的评论帮助我意识到我不需要旧的字体格式。