网站上线后FontAwesome字体加载404但本地正常，该如何排查修复？

排查步骤 #

• 验证路径大小写一致性：Windows本地开发环境对路径大小写不敏感，Linux线上服务器默认大小写敏感，先对比浏览器请求的字体文件路径、代码里的引用路径、服务器上实际存放的文件路径三者的大小写是否完全匹配
• 检查Web服务器静态资源放行规则：默认的Nginx、Apache配置通常不会自动识别.woff、.woff2、.ttf、.eot等字体后缀，会直接拦截请求返回404，可先确认服务器配置是否将字体后缀加入静态资源白名单
• 排查路径重写规则冲突：如果站点配置了SPA路由重写（比如所有请求指向index.html的规则），确认是否排除了静态资源目录/字体文件后缀的重写逻辑，避免字体请求被重定向到HTML页面
• 校验CDN缓存规则（如有）：如果使用CDN加速静态资源，检查CDN回源规则是否正确，是否缓存了历史404响应，可尝试清理对应字体路径的CDN缓存后重试

修复方案 #

• 路径不匹配修复：统一所有字体文件的文件名、引用路径的大小写，建议全小写命名避免大小写敏感问题
• 服务器字体资源配置：
  若使用Nginx，在server配置块中加入以下规则：

  location ~* \.(eot|ttf|woff|woff2|otf)$ {
      root 你的静态资源根目录绝对路径;
      expires 1y;
      add_header Cache-Control "public, immutable";
      # 若存在跨域问题可保留以下配置
      add_header Access-Control-Allow-Origin *;
  }
  

  若使用Apache，在站点根目录的.htaccess文件中加入以下规则：

  AddType application/font-woff2 .woff2
  AddType application/font-woff .woff
  AddType application/x-font-ttf .ttf
  AddType application/vnd.ms-fontobject .eot
  

• 重写规则冲突修复：将字体文件的匹配规则优先级设置为高于路由重写规则，避免字体请求被重写逻辑拦截
• CDN缓存问题修复：清理CDN上对应字体路径的缓存，调整CDN缓存规则避免误缓存404响应

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