避免字体加载过程中出现不可见的文本

字体文件通常是比较大的文件，需要一段时间才能加载。为了解决这个问题，某些浏览器会隐藏文本，直到字体加载完成为止（“不可见文本”）。如果要优化性能，则要避免使用“看不见的文字闪烁”，并立即使用系统字体（“无样式文字”）向用户显示内容。

本文一共介绍两种方式，第一种方法非常简单，但不能获得所有浏览器的支持；第二种方法稍微麻烦一些，但兼容所有浏览器。

方法一、使用font-display

示例：

@font-face { font-family: Helvetica; }

将以上改成：

@font-face { font-family: Helvetica; font-display: swap; }

font-display是用于指定字体显示策略的API。swap告诉浏览器使用此字体的文本应立即使用系统字体显示。自定义字体加载好后，再将系统字体替换掉。

如果浏览器不支持font-display，则浏览器将继续遵循其默认行为来加载字体。

以下为主流浏览器对font-display的支持情况：

方法二、使用FontFaceObserver库

只需多做一些工作，就可以在所有浏览器上均实现正常工作。

此方法包括三个部分：

• 请勿在初始页面加载时使用自定义字体。这样可以确保浏览器立即使用系统字体显示文本。
• 自动检测何时加载自定义字体。可以通过FontFaceObserver库来完成，仅需几行JavaScript代码即可。
• 更新页面样式以使用自定义字体。

FontFaceObserver的使用方法，请详见：https://github.com/bramstein/fontfaceobserver

原文地址：https://www.zhanzhangb.com/1910.html