如何解决CSS中字体（含font icon）更新后的缓存问题？

• 版本号/哈希后缀：给字体文件的URL添加动态版本号或哈希值，比如将 /fonts/icons.ttf 修改为 /fonts/icons.ttf?v=1.0.1，每次更新字体时同步修改版本号。如果用构建工具（如Webpack、Vite），可以配置自动生成带哈希的文件名，比如 icons.abc123.ttf，浏览器会识别为新资源，自动重新下载。

• 服务器端缓存头配置：调整HTTP缓存策略：

  • 给字体文件设置 Cache-Control: max-age=31536000, immutable，配合版本号使用，确保旧版本字体长期缓存，新版本触发新请求；
  • 启用 ETag 或 Last-Modified 响应头，服务器会在字体文件更新后返回新的标识，浏览器对比后自动重新获取最新文件。

• 兜底的用户引导：如果上述技术手段暂时无法落地，更新字体后可以在页面添加临时提示，引导用户通过 Ctrl+F5（Windows）或 Cmd+Shift+R（Mac）强制刷新页面，但这只是临时方案，优先用前两种方法解决。

• 内嵌小体积字体：如果字体文件体积很小（比如几KB），可以将字体转成Base64编码嵌入CSS中，这样字体内容随CSS一同加载，不会单独缓存字体文件，但要注意体积过大时会拖慢CSS加载速度。

内容的提问来源于stack exchange，提问作者Hossein Azizdokht