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

时间:2016-06-17 10:09:39

标签: html css google-chrome font-awesome

我们的主网站在非常偏远的环境中存在问题。

如果用户点击链接,然后非常快速地点击Chrome上的后退按钮,则字体真棒图标将显示为正方形

我们正在使用本地存储的 Font Awesome 实例,这个问题可能每5次尝试一次,但我仍想解决这个问题。

Screenshot

3 个答案:

答案 0 :(得分:2)

我认为这只是FUOC。在您的情况下,字体加载延迟。由于某些原因,它们没有缓存(可能是打开了开发人员工具?)。

您可以尝试通过Chrome上的simulating慢速互联网连接重现此错误。 如果你这样做,你可能也会看到这个方块。

您可能需要实施预加载器屏幕,并且只显示每个资源加载的页面内容。您将必须创建一个覆盖整个页面的div,然后在文档准备好后将其删除。

此处example

答案 1 :(得分:0)

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

答案 2 :(得分:0)

把所有字体文件如.ttf,woff,woff2,也放入它的SVG。确保检查也给出了字体系列名称。还检查字体调用路径。可能会帮助你:))