Html 字体图标显示为导航之间的正方形[仅限Chrome]

我们的主网站在一个非常偏远的环境中出现问题

如果用户点击一个链接，然后很快点击Chrome上的后退按钮，字体可怕的图标将显示为正方形

我们正在使用一个本地存储的Font Awesome实例，这个问题可能每5次尝试只发生一次，但我仍然希望修复这个问题

我认为这是公正的。在您的情况下，字体加载延迟。由于某些原因，它们没有被缓存（可能是开发人员工具被打开了？）

您可以尝试通过在chrome上缓慢的互联网连接来重现此错误。 如果你这样做，你可能也会看到这个方块

您可能需要实现预加载屏幕，并且只显示每个资产加载的页面内容。您必须创建一些div来覆盖整个页面，然后在文档准备就绪时将其删除

---

下面是。

重新排列@font-face中的字体格式，以便将WOFF放在TTF和SVG之前。SVG字体在支持它们的浏览器中呈现得更好。因此，将其设置为默认值。

将所有字体文件，如.ttf、woff、woff2，也将其设置为SVG。请确保选中此复选框并提供字体系列名称。还要检查调用路径。它可能对您有所帮助：）

好吧，正确的方法是用SVG图标替换图标字体。但根据网站的大小，这可能是一个更大的任务…我认为.woff格式的字体丢失了。请检查…=>fontawesome/fonts/fontawesome-webfont.woff