字体图标在加载之前显示为方块形状。

Question

字体图标在加载之前显示为方块形状。

3

我正在这样使用字体神话（font awesome）：

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
  <script src="https://use.fontawesome.com/xxxxxxxx.js"></script>

以及一个元素

但是字体不会立即加载，我在等待加载时看到丑陋的方块。有什么解决方法吗？

- SuperUberDuper

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RoelN · Accepted Answer

您正在经历FOUT（未样式化文本的闪烁），因为Font Awesome使用字体来显示它们的图标。在字体加载之前，您将看到一个回退字体中的图标（例如Arial）。您看到方框是因为Font Awesome使用Unicode PUA代码点将它们的图标映射到，回退字体在那里没有字符，并且会显示通用的“缺失字符”框。

解决方案是使用FontFaceObserver隐藏图标，直到Font Awesome字体加载完成。更好的方法是使用SVG图像，因为图标字体有点像黑客。 Font Awesome提供了它们，所以这可能是您的选择。