确保在 Google pagespeed 洞察报告中未解决 webfont 加载期间文本保持可见答案

【问题标题】：Ensure text remains visible during webfont load not getting resolved in Google pagespeed insights report确保在 Google pagespeed 洞察报告中未解决 webfont 加载期间文本保持可见
【发布时间】：2020-03-21 23:39:50
【问题描述】：

有人可以在这里帮助我吗，下面是我的代码，我应该在哪里插入交换来解决谷歌 pagespeed 洞察报告中的 webfont 问题，因为我无法用 display:swap 替换 display:inline-block。

@font-face {
    font-family: 'FontAwesome';
    src: url('fonts/fontawesome-webfont.eot?v=4.5.0');
    src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

【问题讨论】：

有人可以格式化这个问题吗

标签： css fonts pagespeed-insights

【解决方案1】：

您需要将 font-display 添加到@face-font 声明中。

所以你的代码是：

@font-face {
    font-family: 'FontAwesome';
    src: url('fonts/fontawesome-webfont.eot?v=4.5.0');
    src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

【讨论】：

【解决方案2】：

您还应该使用 Woff2 和 woff，轻 40% 以上。 EOT 不是很好的解决方案。

我写了一篇关于它的文章（法语）来全面优化字体：Optimiser les fonts

【讨论】：