如何修复PageSpeed中bootstrap-icons.woff网页字体加载期确保文本可见报错

可能的原因及对应解决措施 #

• 字体未设置预加载，加载优先级过低
  即便配置了font-display: swap，如果字体文件加载过晚，浏览器还是会有一段时间的文本空白。你可以在HTML的<head>标签中添加字体预加载规则，注意必须带上crossorigin属性，字体资源默认按跨域规则处理，缺少该属性预加载不会生效：

  <link rel="preload" href="../fonts/bootstrap-icons.woff2" as="font" type="font/woff2" crossorigin>
  

• CSS缓存或规则被覆盖
  先清浏览器缓存或者给CSS文件地址加版本后缀（比如xxx.css?v=20240520），确认最新的带font-display: swap的CSS已经成功加载。再检查全局CSS规则，确认没有其他样式重写了bootstrap-icons的font-display配置，也没有第三方插件、CDN的自动优化功能篡改了@font-face规则。
• 图标字体的工具识别误差
  Google PageSpeed对图标类字体的检测偶尔会出现误判，你可以手动验证实际表现：用Chrome开发者工具把网络限速为慢3G，刷新页面观察图标区域的显示情况，如果图标加载期间有默认字符占位、没有出现空白，就是工具误报，可以直接忽略该提示。
• 字体调用匹配问题
  确认页面中使用bootstrap图标的元素，font-family确实设置为了你定义的bootstrap-icons，如果元素调用的字体名称和你@font-face里定义的不一致，font-display: swap规则也不会生效。

效果验证 #

完成调整后再用PageSpeed检测，同时手动测试弱网下的页面表现，确认不存在字体加载期间文本空白的问题即可。

内容的提问来源于stack exchange，提问作者Prem Singh