字体文件通常是比较大的文件，需要一段时间才能加载。为了解决这个问题，某些浏览器会隐藏文本，直到字体加载完成为止（“不可见文本”）。如果要优化性能，则要避免使用“看不见的文字闪烁”，并立即使用系统字体（“无样式文字”）向用户显示内容。
本文一共介绍两种方式，第一种方法非常简单，但不能获得所有浏览器的支持；第二种方法稍微麻烦一些，但兼容所有浏览器。
方法一、使用font-display
示例：
@font-face { font-family: Helvetica; }将以上改成：
@font-face { font-family: Helvetica; font-display: swap; }font-display是用于指定字体显示策略的API。swap告诉浏览器使用此字体的文本应立即使用系统字体显示。自定义字体加载好后，再将系统字体替换掉。
如果浏览器不支持font-display，则浏览器将继续遵循其默认行为来加载字体。
以下为主流浏览器对font-display的支持情况：
| Edge | 使用系统字体，直到字体准备就绪再换掉字体。 |
| Chrome | 隐藏文字最多3秒， 如果文本仍未准备好，使用系统字体，直到自定义字体准备好后，再换掉字体。 |
| Firefox | 与Chrome相同。 |
| Safari | 隐藏文本，直到自定义字体准备就绪。 |
方法二、使用FontFaceObserver库
只需多做一些工作，就可以在所有浏览器上均实现正常工作。
此方法包括三个部分：
- 请勿在初始页面加载时使用自定义字体。这样可以确保浏览器立即使用系统字体显示文本。
- 自动检测何时加载自定义字体。可以通过FontFaceObserver库来完成，仅需几行JavaScript代码即可。
- 更新页面样式以使用自定义字体。
FontFaceObserver的使用方法，请详见：https://github.com/bramstein/fontfaceobserver
