代码之家 › 专栏 › 技术社区 › SuperUberDuper

字体awesome在加载之前显示方块

font-awesome fonts http

SuperUberDuper · 技术社区 · 7 年前

我使用的字体很棒,就像这样:

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

和一个元素

然而,字体不会立即加载,在加载之前,我看到了丑陋的方块。有什么办法吗?

1 回复 | 直到 7 年前

RoelN 7 年前

您正在体验 FOUT (flash of unstyled text) as Font Awesome使用字体显示其图标。在加载字体之前,您将看到一个备用字体中的图标(例如Arial)。您看到该框是因为字体Awesome使用 Unicode PUA codepoints 要将其图标映射到,并且回退字体中没有字符,将显示通用的“缺少字符”框。

解决方案是使用 FontFaceObserver 隐藏图标,直到加载字体Awesome Font。更好的方法是使用SVG图像,因为图标字体是一种黑客行为。Font Awesome提供了这些功能,因此这可能是您的一个选择。

推荐文章

toddmo · 当内容不可用时,如何优雅地后退

7 年前

Ronald LaPlante · 在css中查找字体

7 年前

Namdeo Karande · 使用Aspose在PDF中添加TTF字体文件。HTML

7 年前

bellotas · 如何将新字体导入项目-Angular 5

7 年前

user7088941 · 无法在tkinter中更改按钮字体大小

7 年前

Emre Önder · 在Interface builder中看到的自定义字体,但在iOS项目的代码中没有看到

7 年前

Joey Yi Zhao · 如何在html画布中使用粗体、斜体等字体文件?

7 年前

sripberger · 向docker图像添加字体

7 年前

newbeeep · Freetype2返回的大小值大于预期值

7 年前

FormaL · wordpress请求404/410响应缺少字体

7 年前