http - Font awesome 显示 Squares 直到它被加载

Question

我正在使用这样的字体:

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

和一个元素

但是字体不会立即加载，而且在加载之前我看到丑陋的方 block 。有什么办法解决这个问题吗？

Answer 1

您遇到了 FOUT (flash of unstyled text)因为 Font Awesome 使用字体来显示它们的图标。在加载字体之前，您会看到后备字体(例如 Arial)中的图标。您看到该框是因为 Font Awesome 使用 Unicode PUA codepoints将他们的图标映射到，后备字体那里没有字符，将显示通用的“缺失字符”框。

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