CSS |字体显示属性

使用网络字体时，文本将不可见，直到加载网络字体或经过三秒钟，此时使用后备字体。

Font-display 允许自定义呈现页面时 Web 字体的显示方式。

它使用@font-face规则应用，该规则在样式表中定义自定义字体。

句法：

@font-face {
  font-family: Sample;
  src: url(samplefont.woff) format('woff'),
       url(samplefontbold.woff) format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: optional;
}

例子：

    
    
    


Usage of font-display
Downloaded font
Normal font

输出：

下载的字体会在很短的时间内出现。尝试在 IDE 上运行它以查看它。

font-display 属性时间线分为三个时期：

• 堵塞
• 交换
• 失败

阻塞时间段：在网页字体未加载之前，文本将不可见，在此时间段内阻塞渲染。

Swap Period：原来fallback字体是用来渲染文本的，如果在swap期间成功加载了web font，则fallback font会和web font进行交换。

失败期：此时认为加载失败，需要使用fallback字体。

此属性接受以下值：

• 自动(初始值)：在此值下，浏览器选择字体显示技术。这通常类似于块值。
• 块：它进入一个小块周期，然后进入无限交换周期，因此允许无限渲染。在更简单的形式中，它会隐藏文本，直到加载 Web 字体。
• Swap：在此值下，字体具有最小块周期和无限交换周期。它使用后备字体，直到加载 Web 字体
• 回退：它给字体一个最小的块周期(100 毫秒)和一个小的交换周期(大约 3 秒)。它尝试在短时间内加载 Web 字体，然后进入失败期并使用回退字体。
• 可选：它为 font-face 提供了一个最小的块周期并且没有交换周期。它会暂时隐藏文本，然后使用后备字体，直到 Web 字体成为可以使用的自定义字体。