Chrome 不显示网络字体，在缓存样式表中声明字体时回退到 Times New Roman
Chrome not displaying webfont, falling back to Times New Roman when font-face declared in cached stylesheet
当启用 Chrome 的缓存时，Chrome 中的 FontAwesome (v4) webfont 图标呈现出现问题。间歇性地，在多个用户机器上，一个页面将加载我们的 FontAwesome 图标，如下所示错误显示。此问题只是偶尔发生，无法可靠地重现或缩小到单个页面。唯一常见的重现步骤是使用 Chrome 和 而不是 在开发工具或其他地方启用 "disable cache"。
检查图标元素的开发工具计算样式显示 Chrome 正确地将指定的字体系列检测为 "FontAwesome"，但正在呈现图标的 <i> 标签在 Times New Roman 中，而不是 FontAwesome 网络字体。 "FontAwesome" @font-face 声明 和 上述规则将 font-family: FontAwesome 分配给 .fa class 存在于同一个样式表中，site.css，这是导致问题的原因。
检查下面的来源，我们发现 site.css 在站点的 <head> 标签中正确指定。它没有被添加到 <head> 到 JavaScript；它存在于浏览器加载的初始页面中。 href 指向正确的样式表，在新选项卡中打开时加载没有问题。这并不奇怪，因为 site.css 中指定的所有样式都正确地应用于页面（当然除了 webfont）。甚至 .fa 的 font-family 规则也被 Chrome 正确读取，如上面屏幕截图中的计算样式所示。
我怀疑 Chrome 以一种奇怪的方式从缓存中加载样式表，这种方式允许加载所有样式，但会干扰 FontAwesome 网络字体的创建。下面的潜在证据：
以上是开发工具会话中网络选项卡的一部分。没有过滤掉任何内容，但是 site.css 在请求列表中没有条目，即使存在其他缓存样式表 和 正在应用来自 site.css 的样式到页面。 theme.css、jQuery、AdminLTE 和在同一 <head> 块中 site.css 之后指定的其他样式表的条目。图中未显示，但在 site.css 的 @font-face 声明中为 "FontAwesome" 指定的 fontawesome.woff2 webfont 文件也已成功加载。
刷新页面或导航到另一个页面有时可以解决问题。在禁用缓存的情况下刷新 always 解决了这个问题。我们（相当大的）Web 应用程序的每个页面都使用相同的 <link> 标记加载此样式表，虽然这个问题很少出现，但在许多页面中都发生过。 site.css 样式表显然由 Chrome 加载，因为它看到 font-family: FontAwesome 规则以及我们网站样式的其余部分。但是在从缓存加载样式表的过程中似乎发生了一些事情，这导致 Chrome 退回到 Times New Roman，尽管 webfont 既通过 @font-face 声明并指定为 font-family受影响的元素。
我们没有使用服务工作者或任何服务器端缓存。如上图所示，我们通过 GET 参数（?[productName]Version=2.0.13292.0）进行了一些缓存清除，该值被烘焙到 ASP.NET 加载的初始文档中，并且仅在我们的后端服务器版本更改时更改——所以这不应该是这里问题的原因。
有没有人遇到过与 Chrome webfonts 类似的事情？
我遇到了同样的问题。我编译的 CSS 文件丢失 @charset "UTF-8";，结果缓存的图标字体损坏。请检查这是否对您有帮助。
当启用 Chrome 的缓存时，Chrome 中的 FontAwesome (v4) webfont 图标呈现出现问题。间歇性地，在多个用户机器上，一个页面将加载我们的 FontAwesome 图标，如下所示错误显示。此问题只是偶尔发生，无法可靠地重现或缩小到单个页面。唯一常见的重现步骤是使用 Chrome 和 而不是 在开发工具或其他地方启用 "disable cache"。
检查图标元素的开发工具计算样式显示 Chrome 正确地将指定的字体系列检测为 "FontAwesome"，但正在呈现图标的 <i> 标签在 Times New Roman 中，而不是 FontAwesome 网络字体。 "FontAwesome" @font-face 声明 和 上述规则将 font-family: FontAwesome 分配给 .fa class 存在于同一个样式表中，site.css，这是导致问题的原因。
检查下面的来源，我们发现 site.css 在站点的 <head> 标签中正确指定。它没有被添加到 <head> 到 JavaScript；它存在于浏览器加载的初始页面中。 href 指向正确的样式表，在新选项卡中打开时加载没有问题。这并不奇怪，因为 site.css 中指定的所有样式都正确地应用于页面（当然除了 webfont）。甚至 .fa 的 font-family 规则也被 Chrome 正确读取，如上面屏幕截图中的计算样式所示。
我怀疑 Chrome 以一种奇怪的方式从缓存中加载样式表，这种方式允许加载所有样式，但会干扰 FontAwesome 网络字体的创建。下面的潜在证据：
以上是开发工具会话中网络选项卡的一部分。没有过滤掉任何内容，但是 site.css 在请求列表中没有条目，即使存在其他缓存样式表 和 正在应用来自 site.css 的样式到页面。 theme.css、jQuery、AdminLTE 和在同一 <head> 块中 site.css 之后指定的其他样式表的条目。图中未显示，但在 site.css 的 @font-face 声明中为 "FontAwesome" 指定的 fontawesome.woff2 webfont 文件也已成功加载。
刷新页面或导航到另一个页面有时可以解决问题。在禁用缓存的情况下刷新 always 解决了这个问题。我们（相当大的）Web 应用程序的每个页面都使用相同的 <link> 标记加载此样式表，虽然这个问题很少出现，但在许多页面中都发生过。 site.css 样式表显然由 Chrome 加载，因为它看到 font-family: FontAwesome 规则以及我们网站样式的其余部分。但是在从缓存加载样式表的过程中似乎发生了一些事情，这导致 Chrome 退回到 Times New Roman，尽管 webfont 既通过 @font-face 声明并指定为 font-family受影响的元素。
我们没有使用服务工作者或任何服务器端缓存。如上图所示，我们通过 GET 参数（?[productName]Version=2.0.13292.0）进行了一些缓存清除，该值被烘焙到 ASP.NET 加载的初始文档中，并且仅在我们的后端服务器版本更改时更改——所以这不应该是这里问题的原因。
有没有人遇到过与 Chrome webfonts 类似的事情？
我遇到了同样的问题。我编译的 CSS 文件丢失 @charset "UTF-8";，结果缓存的图标字体损坏。请检查这是否对您有帮助。