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

Question

确保在 webfont 加载期间文本仍然可见，即使在添加font-display:swap到 CSS之后，谷歌 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-facewebfontsgoogle-fonts

Answer 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');
}