加载字体时避免隐藏文本

加载大字体需要时间。大多数浏览器会隐藏文本，直到字体完全加载。此问题称为不可见文本闪烁(FOIT)。

我们可以通过在自定义字体仍在加载时要求浏览器使用系统字体来防止它发生。加载字体后，它将替换之前使用的系统字体。该短语也称为无样式文本闪现(FOUT)。

为了归档它，我们可以使用以下`font-display`样式：

@font-face {
    font-family: 'Roboto';
    font-display: swap;
}

如果您使用的是Google fonts，那么放置`display=swap`参数是等效的方式：

<link href="https://fonts.googleapis.com/css2?family=Roboto:400,700&display=swap" rel="stylesheet" />