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

Question

即使在将 font-display: swap 添加到 CSS.

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

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