logo标签列表

字体Awesome图标在导航栏中显示为方块[仅限Chrome]

htmlcssgoogle-chromefont-awesome
4

我们的主要网站在极端情况下存在一个问题。

如果用户点击链接，然后非常快地在Chrome浏览器上单击“返回”按钮，则Font Awesome图标将显示为方块。

我们使用本地存储实例的Font Awesome，这个问题只会偶尔出现，大概每5次尝试中会有1次，但我仍然希望修复这个问题。

屏幕截图

1
正确的方法是用SVG图标替换图标字体。但是，根据网站的大小，这可能是一项更大的任务... - Boldewyn
我认为缺少.woff格式的字体，请检查... => fontawesome/fonts/fontawesome-webfont.woff - Nehemiah
3个回答
2
我认为这只是FUOC。在您的情况下，字体加载有延迟。由于某些原因，它们没有被缓存（可能是开启了开发人员工具？）。
您可以尝试通过在 Chrome 上模拟缓慢的互联网连接来重现此错误。 如果您这样做，您可能也会看到这些方块。
您可能需要实现预加载屏幕，并仅在每个资产都加载完毕后显示页面内容。您将不得不创建一个覆盖整个页面的 div，然后在文档准备就绪时将其删除。
这里是示例。
0

重新排列@font-face中的字体格式，使得WOFF在TTF和SVG之前。支持SVG字体的浏览器渲染效果更好，因此将其设置为默认。

0

将所有字体文件，如.ttf、.woff、.woff2，以及其SVG文件放在一起。确保检查并给出字体家族名称。还要检查字体的调用路径。也许这会对你有所帮助 :)

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接