Chromium @font-face 缓存行为 (FOIT)答案

【问题标题】：Chromium @font-face caching behavior (FOIT)Chromium @font-face 缓存行为 (FOIT)
【发布时间】：2016-12-12 15:56:07
【问题描述】：

我注意到某些网站上基于 Chromium 的浏览器（Google Chrome 和 Opera）中出现了不可见文本 (FOIT)，即使 Web 字体文件已被缓存（在第一次加载后在同一网站上浏览）也是如此。

更深入的研究表明这与缓存行为有关。仅当从disk cache 加载文件时才会发生 FOIT。当文件从memory cache 提供时，一切看起来都很稳定（使用内置的网络检查器工具）。

我们如何影响网络字体放置在哪个缓存中？

【问题讨论】：

您尝试过非 gzip 压缩吗？有帮助吗？
@godblessstrawberry 事实上，禁用 gzip 是解决方案。请参阅下面的答案：stackoverflow.com/a/41116582/4362080
谢谢老哥，试试这个

【解决方案1】：

基于 Chromium 的浏览器似乎会将压缩后的内容加载到 disk cache。至少这就是使用过的.woff2 文件没有加载到memory cache 的原因。

只要 woff/woff2 文件已经被压缩，就不需要进一步的 gzip 压缩 (http://www.phpied.com/font-face-gzipping-take-ii/)。当我禁用这些文件的压缩时，定制的 FOIT 消失了（某些 Web 服务器默认启用所有文件的压缩）。

当使用 Apache 作为 Web 服务器时，可以使用以下代码行归档：

SetEnvIfNoCase Request_URI \.(?:woff|woff2)$ no-gzip

【讨论】：