启用Chrome的缓存后，Chrome中的FontAwesome(v4)Web字体图标呈现出现问题。间歇性地，在多台用户计算机上，页面加载时将错误显示我们的FontAwesome图标，如下所示。此问题仅偶尔发生，并且不能可靠地复制或缩小到单个页面。唯一常见的复制步骤是使用Chrome，并且未在开发工具或其他工具中启用“禁用缓存”。
检查开发人员工具中图标元素的计算样式后发现，Chrome浏览器正确地将指定的字体家族检测为“FontAwesome”，但是图标的<i>标签是在Times New Roman中呈现的，而不是FontAwesome Webfont中呈现的。在同一样式表font-family: FontAwesome中存在“FontAwesome” @ font-face声明以及将.fa分配给site.css类的上述规则，这导致了问题。
检查下面的源代码，我们发现在站点的site.css标记中正确指定了<head>。不会通过JavaScript将其添加到<head>中。它存在于浏览器加载的初始页面中。 href指向正确的样式表，该样式表在新标签页中打开时将加载而不会出现问题。这并不奇怪，因为site.css中指定的所有样式都正确地应用于了页面(当然，除了webfont之外)。 Chrome甚至可以正确读取.fa的font-family规则，如上面的屏幕截图中计算出的样式所示。
我怀疑Chrome会以一种怪异的方式从缓存中加载样式表，该方式允许加载所有样式，但会干扰FontAwesome网络字体的创建。可能的证据如下:
以上是“开发工具” session 中“网络”标签的一部分。没有任何内容被过滤掉，但是site.css在请求列表中没有条目，即使存在其他缓存的样式表并且site.css中的样式也已应用到页面上。在同一theme.css块中，在site.css后面紧跟着指定的<head>，jQuery，AdminLTE和其他样式表的条目。它未显示，但是site.css的@font-face声明中为“FontAwesome”指定的fontawesome.woff2 Webfont文件也已成功加载。
刷新页面或导航到另一页面有时可以解决该问题。在禁用缓存的情况下刷新始终可以解决该问题。我们的Web应用程序(很大)的每个页面都使用相同的<link>标记加载此样式表，尽管这个问题很少出现，但在许多页面中都发生过。 Chrome显然正在加载site.css样式表，因为它可以看到font-family: FontAwesome规则以及我们的其他网站样式。但是，尽管从@font-face声明了webfont并为受影响的元素指定了font-family，但从缓存加载样式表的过程中似乎发生了某些事情，这导致Chrome退回到Times New Roman。
我们没有使用服务 worker 或任何服务器端缓存。我们通过GET参数进行了一些cachebusting，如上面的屏幕快照(?[productName]Version=2.0.13292.0)所示，该值被烘焙到ASP.NET加载的初始文档中，并且仅在后端服务器的版本更改时才更改-因此不应问题的原因在这里。
有没有人体验过Chrome Webfonts的相似之处？
最佳答案
我有同样的问题。我编译的CSS文件缺少@charset "UTF-8";，因此，缓存的图标字体损坏了。请检查是否对您有帮助。