字体真棒显示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>

和元素
  

然而，字体不会立即加载，在加载之前我同时看到丑陋的方块。任何方式围绕这个？

Answer 1

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

解决方案是使用FontFaceObserver隐藏图标，直到Font Awesome字体加载完毕。更好的是使用SVG图像，因为图标字体是一种黑客攻击。 Font Awesome提供了它们，因此这可能是您的选择。