如何修复 PageSpeed 中的“确保文本在 webfont 加载 bootstrap-icons.woff 期间保持可见”错误答案

【问题标题】：How to Fix “Ensure text remains visible during webfont load bootstrap-icons.woff” Error in PageSpeed如何修复 PageSpeed 中的“确保文本在 webfont 加载 bootstrap-icons.woff 期间保持可见”错误
【发布时间】：2021-09-24 15:18:33
【问题描述】：

确保在 webfont 加载期间文本仍然可见，即使将 font-display: swap 添加到 CSS 后，Google pagespeed 洞察报告中的问题也没有得到解决。

@font-face {
    font-display: swap;
    font-family: 'bootstrap-icons';
    src: url('../fonts/bootstrap-icons.woff') format('woff'), 
        url('../fonts/bootstrap-icons.woff2') format('woff2');
}

【问题讨论】：

标签： font-face webfonts google-fonts

【解决方案1】：

preload和font-display: swap;一起使用就解决了这个问题

<link href="../css/bootstrap-icons.css" rel="stylesheet preload" as="style" />

@font-face {
    font-display: swap;
    font-family: 'bootstrap-icons';
    src: url('../fonts/bootstrap-icons.woff') format('woff'), 
        url('../fonts/bootstrap-icons.woff2') format('woff2');
}

【讨论】：