Nginx需同时配置正确MIME类型和CORS响应头才能使Web字体跨域正常加载：在types块中声明woff2/woff/eot/ttf/otf/svg对应类型，并在location中添加Access-Control-Allow-Origin等头，且*仅限无凭据请求。
要让 Web 字体（如 .woff、.woff2、.ttf、.eot、.svg）在跨域场景下被浏览器正常加载，Nginx 需同时满足两个条件：正确声明 MIME 类型（避免 404 或 MIME 类型错误），以及允许跨域请求（CORS 响应头）。否则会出现字体加载失败、控制台报错（如 “Font from origin X has been blocked from loading by CORS policy”）。
确保字体文件使用正确的 MIME 类型
Nginx 默认可能未为某些字体后缀配置标准 MIME 类型，尤其 .woff2 和 .woff 在旧版本中容易缺失。需检查并补充 /etc/nginx/mime.types 或直接在 server/location 块中用 types 指令显式声明：
-
application/font-woff2→.woff2 -
application/font-woff→.woff -
application/vnd.ms-fontobject→.eot -
font/ttf或application/x-font-ttf→.ttf -
image/svg+xml→.svg（仅当用作字体时，注意 SVG 字体已基本弃用，但仍有遗留使用）
推荐在 http 或 server 块中添加：
types {
application/font-woff2 woff2;
application/font-woff woff;
application/vnd.ms-fontobject eot;
font/ttf ttf;
font/otf otf;
image/svg+xml svg;
}启用字体资源的跨域访问（CORS）
仅设置 MIME 类型还不够。浏览器对字体资源实施严格的跨域策略（比普通资源更严），必须返回 Access-Control-Allow-Origin 响应头，且该头**不能是通配符 ***（除非请求不含凭据，如 cookies）。常见安全做法是明确指定允许的源，或对字体静态资源使用无凭据请求 + *。
在提供字体的 location 块中添加：
location ~* \.(woff2|woff|eot|ttf|otf|svg)$ {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
# 可选：缓存优化
expires 1y;
add_header Cache-Control "public, immutable";
}⚠️ 注意：Access-Control-Allow-Origin: * 仅在字体请求不携带 credentials（即前端 CSS 中 @font-face 的 font-display 或 fetch 不设 credentials: 'include'）时合法。若需带凭据，请将 * 替换为具体域名，如 'https://example.com'，并确保响应头中不包含 Vary: Origin 冲突（Nginx 默认不加，一般无需干预）。
验证是否生效
部署后，用 curl 检查响应头和 MIME 类型：
curl -I https://your-site.com/fonts/example.woff2
确认输出中包含：
Content-Type: application/font-woff2-
Access-Control-Allow-Origin: *（或对应域名）
同时在浏览器开发者工具的 Network 标签页中查看该字体请求，确认状态码为 200、MIME 类型正确、响应头含 CORS 头，且 Console 无跨域字体报错。
补充建议
如果字体托管在独立子域（如 fonts.example.com），确保该子域的 Nginx 配置也启用上述 MIME + CORS；若使用 CDN，需确认其支持自定义响应头与 MIME 类型覆盖（如 Cloudflare Page Rules 或阿里云 CDN 的自定义 Header 功能）。
