Chrome中字体加载异常：Bootstrap字体在生产服务器加载不稳定

这种间歇性的字体加载问题我之前在项目里也碰到过，结合你描述的「首次/二次加载正常、多次刷新就异常」的情况，大概率是缓存策略、资源打包路径或者服务器配置的锅，给你几个具体的排查和解决方向：

1. 检查服务器缓存策略 #

生产环境的服务器如果对字体资源（.woff、.woff2、.ttf这类）设置了不合理的缓存规则，很容易导致多次刷新后浏览器拿到过期甚至损坏的缓存文件。

• 建议在服务器配置里（比如Nginx、Apache）给字体文件加上合适的缓存头，举个Nginx的配置例子：

  location ~* \.(woff|woff2|ttf|eot|svg)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
  }
  

  这样既能保证浏览器缓存有效资源，又能避免缓存过期资源的问题。

2. 调整Font Awesome的引入方式 #

你现在是在global.scss里用@import '../../../node_modules/font-awesome/scss/font-awesome'导入的，这种方式在生产打包时很容易出现资源路径错误的问题。

• 可以试试换一种引入方式：直接在项目入口JS里导入编译好的CSS文件，比如：

  import 'font-awesome/css/font-awesome.min.css';
  

  或者在HTML的<head>标签里直接引入：

  <link rel="stylesheet" href="/path/to/font-awesome.min.css">
  

  这样打包工具（不管是Webpack还是Vite）都能更准确地处理字体资源的路径和打包逻辑。

3. 检查打包工具的资源处理配置 #

如果用的是Webpack，一定要确保它能正确处理字体文件，不然打包后字体路径会乱掉。可以在Webpack配置里加上这一段：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name][ext]'
        }
      }
    ]
  }
};

这段配置会把字体文件统一输出到fonts目录下，同时自动修正CSS里的引用路径。

4. 验证资源完整性 #

如果是用CDN加载字体，可能是CDN节点的缓存出了问题；如果是本地资源，要检查打包后的字体文件有没有损坏。

• 可以先试试重新安装Font Awesome依赖：

  npm uninstall font-awesome && npm install font-awesome
  

  或者换一个版本的Font Awesome试试，有时候版本兼容也会导致这类问题。

另外，从你提供的截图（字体加载失败的网络请求）里，可以重点看请求的状态码：

• 如果是404：那肯定是路径配置错了，检查打包后的CSS里字体的引用路径和实际文件路径是否一致；
• 如果是500或其他服务器错误：赶紧联系运维排查服务器的静态资源服务配置。

内容的提问来源于stack exchange，提问作者Rahul Pawar