如何修复PageSpeed中的“确保文本在Web字体加载过程中仍然可见-icons.woff”错误

Question

确保文本在网页加载期间仍然可见，即使在将字体显示:交换添加到CSS之后，也不会在google页面分析报告中得到解决。

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