location ~* \.(woff2?|ttf|otf)$ {
  add_header Access-Control-Allow-Origin 'https://www.example.com';
}

换到新域名后图标字体全变成方块,控制台报 Access to font has been blocked by CORS policy,同页的图片却都正常。这类现象通常不是突然出现的,往前翻半天日志能看到苗头。

追下去是这么回事:字体属于跨域资源,响应里必须带 Access-Control-Allow-Origin 才允许加载,图片没有这条限制。CDN 只给 js 和 css 配了跨域头,woff2 没覆盖到。

围绕「字体 CORS 响应头」排查时,命令行跑一遍比在面板里点十次有用,面板会替你做掉不少隐式操作。同类问题如果隔一段时间又出现,多半是某个定时任务或重启流程把改动冲掉了。

把这次用到的命令存进笔记,比记住结论有用,换个环境还能照着走。改完隔一天再看一次,当场正常不代表能稳住。

测试环境和线上的差别,往往就在版本号和那几行被忽略的配置上。

处理上按这个顺序:在字体响应上加 Access-Control-Allow-Origin,值写具体域名或星号;确认 CSS 里的字体地址和页面不同源,同源不会触发这条检查;预加载字体时补 crossorigin,否则会下载两次。

确认没问题再收工,字体请求返回 200 且带跨域头,图标恢复成正常字形。

作者 9823189