woff字体文件缓存命中率低？几个配置技巧让网页字体秒加载

打开一个网页，文字先显示成方块或空白，等半秒后才突然“弹”出来——这多半是woff字体没缓存住。尤其在做后台系统、管理平台这类对响应速度敏感的页面时，字体加载慢会直接拉低用户信任感。

为啥woff文件总不走缓存？

浏览器其实很愿意缓存woff，但很多服务器默认没给它配合适的HTTP头。比如Nginx默认把woff当普通二进制文件处理，只给5分钟缓存；Apache更绝，有些老版本压根不识别woff后缀，直接返回Cache-Control: no-cache。

Nginx上加一行就搞定

打开你的Nginx配置，在server或location块里加上：

location ~* \.woff2?$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

注意：这里同时匹配woff和woff2，immutable告诉浏览器“这文件一年内不会变”，能绕过部分强制验证请求，提升命中率。

Apache用户别慌，.htaccess也能救

如果你用的是虚拟主机或没法改主配置，把下面这段丢进网站根目录的.htaccess里就行：

<IfModule mod_expires.c>
    ExpiresActive on
    ExpiresByType application/font-woff "access plus 1 year"
    ExpiresByType application/font-woff2 "access plus 1 year"
</IfModule>
<IfModule mod_headers.c>
    <FilesMatch ".\.(woff|woff2)$">
        Header set Cache-Control "public, immutable"
    </FilesMatch>
</IfModule>

顺手检查下字体引用路径

有时候缓存没生效，不是配置问题，而是字体URL本身带了时间戳或版本号，比如：/fonts/icon.woff?v=2.3.1。每次改v参数，浏览器就当新资源重新下载。上线前记得把这类动态参数去掉，或者用文件内容哈希（如icon.a1b2c3.woff）代替版本号。

本地验证小技巧

打开Chrome开发者工具 → Network标签 → 刷新页面 → 找到woff文件，看Headers里的Cache-Control值是不是public, immutable，再看Size列如果显示from disk cache或from memory cache，说明已经稳稳命中了。