关键在于三件事:正确声明跨域头、启用压缩并适配字体MIME类型、避免压缩干扰解析;Nginx通过add_header设置Access-Control-Allow-Origin等响应头,补充gzip_types包含font/woff2等类型,并启用gzip_static预压缩以兼顾跨域与高效传输。

要让字体文件既支持跨域访问,又享受 gzip 压缩传输,关键在于三件事:正确声明跨域头、启用压缩且适配字体 MIME 类型、避免压缩干扰字体解析。Nginx 本身不处理跨域逻辑,但能精准控制响应头和压缩行为,配合前端请求即可达成目标。
配置字体文件的跨域访问头
字体(如 .woff2、.woff、.ttf、.eot)在多数浏览器中受 CORS 策略限制,若从其他域名加载,必须显式允许。仅靠 Access-Control-Allow-Origin: * 不够,还需指定 Access-Control-Allow-Methods 和 Access-Control-Allow-Headers,尤其当使用预检请求时:
- 在对应 location 块中添加:
add_header 'Access-Control-Allow-Origin' '*'; - 允许字体相关方法与头字段:
add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; - 对 OPTIONS 预检请求直接返回 204:
if ($request_method = 'OPTIONS') { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods GET,OPTIONS; add_header Access-Control-Allow-Headers DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range; add_header Access-Control-Max-Age 1728000; add_header Content-Type 'text/plain; charset=utf-8'; add_header Content-Length 0; return 204; }
确保字体文件被 gzip 压缩
默认情况下,Nginx 的 gzip_types 不包含字体类型,需手动补充。否则即使启用 gzip,.woff2 或 .ttf 文件也不会被压缩:
- 在 http 或 server 块中确认已开启压缩:
gzip on; - 扩展支持的 MIME 类型:
gzip_types application/font-woff2 application/font-woff application/vnd.ms-fontobject font/ttf font/otf image/svg+xml text/plain text/css application/javascript application/json; - 注意:.woff2 实际 MIME 类型是
font/woff2,但部分旧版 Nginx 未内置该类型,建议用application/font-woff2或直接写font/woff2(需确认 Nginx 版本 ≥ 1.13.5) - 设置合理最小长度阈值,避免小字体文件(如图标字体)因压缩反而变大:
gzip_min_length 1024;(1KB 起压)
启用静态预压缩(推荐用于字体)
字体文件极少变动,实时压缩纯属浪费 CPU。更优做法是在构建阶段生成 .gz 文件(如 icon.woff2.gz),再由 Nginx 自动识别并发送:
- 前端构建时使用插件(如 Webpack 的
CompressionPlugin)生成 .gz 副本 - Nginx 配置中启用:
gzip_static on; - 确保文件权限可读,且 .gz 文件与原文件同目录、同名(仅后缀不同)
- 该方式跳过运行时压缩,响应更快,也避免因并发压缩导致的 CPU 尖峰
验证是否生效
上线后务必验证两件事是否同时成立:
- 浏览器开发者工具 → Network → 找到字体请求 → 查看 Response Headers 中是否有:
Content-Encoding: gzip和Access-Control-Allow-Origin: * - 对比压缩前后大小:一个 80KB 的 .woff2 文件启用 gzip 后通常降至 25–35KB(压缩率约 55–65%)
- 用 curl 快速检查:
curl -H "Accept-Encoding: gzip" -I https://yoursite.com/fonts/icon.woff2→ 应返回200 OK且含Content-Encoding: gzip











