IE11中.woff图标仅首次页面加载可用问题排查

嘿，这个问题我之前帮朋友排查过类似的，大概率是生产环境的缓存策略或者服务器配置在搞鬼！结合你描述的“清缓存就恢复”的情况，给你几个具体的排查和解决方向：

1. 先确认字体文件的请求路径是否正确 #

你提到重新加载后返回404，首先打开IE的开发者工具（F12切换到「网络」标签），刷新页面看字体文件的请求URL：

• 对比测试环境的请求路径，是不是生产环境的目录结构变了？比如测试环境字体在/fonts/下，生产环境部署到了子域名或者CDN路径，导致CSS里的相对路径失效。
• 建议把Font Squirrel生成的CSS里的字体路径改成绝对路径，比如/static/fonts/myfont.woff，避免相对路径在不同环境下出错。

2. 检查服务器的缓存控制配置 #

这是最常见的原因：

• 生产环境可能给CSS或字体文件设置了过长的缓存时间，但文件名没有加内容哈希（比如myfont-v1.woff），导致浏览器缓存了旧的CSS，而旧CSS里的字体路径可能已经失效，或者字体文件更新后浏览器还在请求旧的文件名。
• 解决方法：给字体和CSS文件的文件名加上内容哈希值（比如用打包工具自动生成，像Webpack的[contenthash]），这样文件内容变化时文件名自动更新，浏览器会请求新文件，不会用旧缓存。
• 另外，检查服务器返回的Cache-Control头，不要给字体文件设置max-age=31536000这类永久缓存，除非搭配哈希文件名使用。

3. 针对IE的特殊缓存处理 #

IE对字体文件的缓存机制有点“固执”：

• 如果服务器没有返回正确的ETag或Last-Modified头，IE可能会错误缓存404响应，之后每次加载都直接用这个错误缓存，导致字体加载失败。
• 可以临时在服务器配置里给字体文件设置Cache-Control: no-cache测试，看是否解决问题，之后再调整成合适的缓存策略（比如max-age=86400）。

4. 若用了CDN，检查CDN缓存 #

如果生产环境用了CDN加速：

• CDN可能缓存了旧的CSS或字体文件，导致用户拿到的是过时的内容。
• 手动刷新CDN的缓存，并且确保CDN的缓存规则是基于文件内容哈希来缓存的，这样文件更新后CDN会自动拉取新资源。

快速验证步骤 #

1. 打开IE开发者工具，网络标签里勾选「始终从服务器刷新」，再刷新页面，看字体文件是否还404。
2. 对比生产环境和测试环境的CSS文件内容，确认@font-face里的src路径完全一致。

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