谷歌浏览器中字体Awesome闪烁

Question

我在我的网站上使用FontAwesome作为一些图标：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

但是，在Chrome中当我刷新页面时，Font Awesome需要大约0.5秒才能加载完成，导致页面发生位移，然后在字体加载完后再次回到原位。

我已经尝试了Edge和Firefox，它们会立即加载，这是为什么？

- Lewis Holland

---

谷歌搜索“FOUT”。如果Chrome在加载CSS之前更快地显示您的内容，则会出现未经样式化的文本闪烁，这就是为什么通常需要确保在CSS加载完成之前不要有整个DOM呈现（并且在CSS仍在加载时显示的内容不依赖于太多的样式）。你的代码在哪里？例如，显示了多少内容使用fontawesome的HTML在哪里？ - Mike 'Pomax' Kamermans

我正在使用myBB和FA加载论坛图标，仅此而已。我只在4个项目中使用了其中的一个。 - Lewis Holland

未经样式处理的论坛图标占位符与FA转换后的大小是否不同？如果是，即使进行重新设计，尝试匹配它们也不应再导致内容移位。 - Mike 'Pomax' Kamermans

Answer 1

尝试将它直接放在您的托管服务器上，并从那里加载。从CDN加载资产有时会导致问题。

- Twixes