要让woff/ woff2字体文件既跨域又高效压缩,关键在于三件事:补全font/woff2等mime类型至gzip_types、配置完整cors响应头(含options预检处理)、启用gzip_static优先返回预压缩.gz文件。

要让 Nginx 正确压缩并跨域传输 WOFF/ WOFF2 字体文件,不能只开 gzip on,关键在三点:明确声明字体 MIME 类型、补全跨域响应头、用预压缩替代实时压缩。
让 WOFF2 和 WOFF 被 gzip 压缩
Nginx 默认的 gzip_types 不包含字体类型,即使开了 gzip,.woff2 文件也不会被压缩。必须手动加入对应 MIME 类型:
- WOFF2 推荐用
font/woff2(Nginx ≥ 1.13.5 支持),也可用application/font-woff2 - WOFF 用
font/woff或application/font-woff - 同时补上
application/vnd.ms-fontobject(EOT)和application/x-font-ttf(TTF)更稳妥 - 设置
gzip_min_length 1024,避免小图标字体(如 200–500B)因压缩头开销反而变大
确保字体能跨域加载不报 CORS 错
浏览器对字体实施严格 CORS 检查,仅设 Access-Control-Allow-Origin: * 不够,尤其遇到预检请求(OPTIONS)时会失败:
- 在匹配字体文件的
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 状态并带上上述头,避免前端卡在预检阶段
- 注意:若使用 CDN 或反向代理,需确保中间层不覆盖或删掉这些响应头
优先用 .gz 预压缩,别依赖实时压缩
字体文件几乎不变更,每次请求都实时 gzip 是 CPU 浪费。推荐构建阶段生成 .gz 副本,由 Nginx 自动识别发送:
- 前端构建时(Webpack/Vite)用 CompressionPlugin 输出
icon.woff2.gz、fonts.woff.gz等 - Nginx 配置启用
gzip_static on,它会优先查找同名 .gz 文件并直接返回 - 确保 .gz 文件时间戳与源文件一致,可用
touch -r font.woff2 font.woff2.gz同步 - 仍保留
gzip on作为兜底,防止构建遗漏时降级为实时压缩
配套必须开启的压缩基础项
以上针对字体的配置,需建立在合理的基础 gzip 设置之上:
-
gzip_vary on:让 CDN 和浏览器缓存区分 gzip / 非 gzip 版本 -
gzip_comp_level 5:平衡压缩率(WOFF2 本身已高压缩,再压增益有限,级别 5 足够) -
gzip_http_version 1.1:确保 HTTP/1.1 客户端能正确协商压缩 - 不要把
image/*、video/*、application/pdf加进gzip_types,它们不受益于 gzip,反而拖慢服务











