根本原因是字体文件服务端未返回Access-Control-Allow-Origin响应头，仅前端设置crossorigin: anonymous无效；必须在Nginx/Apache等服务器或CDN上精确配置字体后缀（.woff2/.woff/.ttf等）的CORS头，并确保MIME类型正确、缓存透传且不依赖*通配符。
font-face 加载字体时跨域失败，根本原因不是 CSS 本身跨域，而是字体文件（.woff2、.woff、.ttf 等）被浏览器按 CORS 策略拦截。只配 CSS 的域名白名单没用，必须让字体资源响应头带正确的 Access-Control-Allow-Origin。
为什么加了 crossorigin: anonymous 还报错？
前端在 @font-face 里写了 crossorigin: anonymous，只是告诉浏览器“请用 CORS 模式去取这个字体”，但服务端不配合——没返回对应响应头——请求照样被拦。浏览器控制台会报类似这样的错误：
Font from origin 'https://cdn.example.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
常见误区是只改前端、不动服务器，或者只给 HTML/JS 配 CORS，漏掉字体后缀。
- 确保 Nginx/Apache 配置覆盖所有字体扩展名：
.woff、.woff2、.ttf、.eot、.otf（.svg字体也建议加上，尽管已少用） - 不要只写
add_header Access-Control-Allow-Origin *;—— 如果字体请求带 cookie（比如登录态），*会失效，必须指定具体域名，如https://yourapp.com - 如果用了 CDN，确认 CDN 缓存层是否透传或覆盖了源站的 CORS 头；有些 CDN 默认不缓存响应头，需单独开启“缓存响应头”选项
Nginx 配置字体 CORS 的最小安全写法
别直接在 http 块全局加 *，优先按 location 精确匹配字体路径：
立即学习“前端免费学习笔记（深入）”；
location ~* \.(woff2?|ttf|eot|otf)$ {
add_header Access-Control-Allow-Origin "https://yourapp.com" always;
add_header Access-Control-Allow-Methods "GET" always;
add_header Access-Control-Allow-Headers "X-Requested-With, Content-Type" always;
add_header Access-Control-Max-Age "31536000" always;
}注意几个关键点：
-
always参数必须加，否则 304 响应不会带这些头，导致字体二次加载失败 - 用
https://yourapp.com而非*，避免后续需要凭证（如带 cookie 的字体 API）时踩坑 - 如果部署多个子域名（如
app1.yourapp.com、app2.yourapp.com），不能用通配符*.yourapp.com（CORS 不支持），得用动态变量或分别配置
Apache 和静态托管平台怎么配？
Apache 需启用 mod_headers，然后在站点配置或 .htaccess 中写：
<FilesMatch "\.(woff2?|ttf|eot|otf)$">
Header set Access-Control-Allow-Origin "https://yourapp.com"
Header set Access-Control-Allow-Methods "GET"
</FilesMatch>如果是 Vercel、Netlify、Cloudflare Pages 这类静态托管平台：
- Vercel：在
vercel.json中加headers规则，匹配字体路径并设置Access-Control-Allow-Origin - Netlify：用
_headers文件，格式为：/fonts/*.woff2下一行写Access-Control-Allow-Origin: https://yourapp.com - Cloudflare Pages：目前不支持自定义字体响应头，只能把字体文件挪到同源下，或走 Workers 转发加头
验证是否生效的三步检查法
别只看控制台有没有报错，要确认头真的回来了：
- 打开开发者工具 → Network → 找到那个
.woff2请求 → 点开 → Headers → Response Headers → 查找Access-Control-Allow-Origin - 用
curl -I https://cdn.example.com/fonts/icon.woff2直接看响应头，排除浏览器缓存干扰 - 如果字体仍不显示，再切到 Network → Fonts 标签页，确认字体请求状态码是 200（不是 404 或 403），且
Content-Type是font/woff2（不是text/plain）
最容易被忽略的是 MIME 类型错误——Nginx 默认不识别 .woff2，必须在 mime.types 里补上 application/font-woff2 woff2;，否则即使 CORS 头对了，浏览器也会拒收。
