font-display决定了@font-face在不同的下载时间和可用时间下是如何展示的。

字体显示时间轴(当决定使用该字体的那一刻开始包含3个周期)

1.字体堵塞周倜

如果未加载字体,所有使用他的元素必须使用透明的后备字体。如果在此期间字体加载成功,则正常使用它。

2.字体交换周期

如果未加载字体,任何尝试使用它的元素都必须呈现后备字体。如果在此期间字体已成功加载,则正常使用它。

3.字体失败周期

如果未加载字体,用户代理将其视为导致正常字体回退的失败加载。

语法

/* 关键字值 */
font-display:auto;
font-display:block;
font-display:swap;
font-display:fallback;
font-display:optional;

属性值

auto
字体显示策略由用户代理定义。
block
为字体提供一个短暂的阻塞周期和无限的交换周期。
swap
为字体提供一个非常小的阻塞周期和无限的交换周期。
fallback
为字体提供一个非常小的阻塞周期和短暂的交换周期。
optional
为字体提供一个非常小的阻塞周期,并且没有交换周期。