CSS font-display用法及代码示例

使用网络字体时，在加载网络字体或经过三秒钟之前，文本将是不可见的，此时将使用后备字体。

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;
}

例：

<!DOCTYPE html> 
<html> 
<head> 
    <title>CSS | font-display</title> 
    <meta name='viewport' content="width=device-width, initial-scale=1"> 
    <style> 
        @font-face { 
        font-family:Roboto; 
        src:url(Roboto\Roboto-BoldItalic.ttf) format('truetype'); 
        font-style:italic; 
        font-weight:bold; 
        font-display:block; 
    } 
  
    div{ 
        font-family:Roboto; 
        font-style:italic; 
        font-weight:bold; 
    } 
</style> 
</head> 
<body> 
<h1>Usage of font-display</h1> 
<div>Downloaded font</div> 
<p>Normal font</p> 
</body> 
</html>

输出：

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

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

Block
Swap
Failure

屏蔽期：在未加载网络字体之前，文本将不可见，在此期间渲染被屏蔽。

交换周期：通常，后备字体用于呈现文本，如果在交换期间成功加载了Web字体，则会将后备字体替换为Web字体。

失败时间段：此时，认为加载失败，并且将使用后备字体。

此属性接受以下值：

自动(初始值)：在该值下，浏览器选择了font-display技术。这通常类似于“块”值。
块：它会经历一个小的块周期，然后进入无限交换期，因此可以无限次渲染。以更简单的形式，它将隐藏文本，直到加载Web字体为止。
交换：在此值下，为font-face提供最小的块周期和无限的交换周期。它使用后备字体，直到加载Web字体
后退：给font-face一个最小的块周期(100毫秒)和一个小的交换周期(约3秒)。它尝试在短时间内加载Web字体，然后进入故障时期并使用后备字体。
可选：给font-face一个最小的块周期，没有交换周期。它会短暂隐藏文本，然后使用后备字体，直到可以使用Web字体作为自定义字体为止。

相关用法

注：本文由纯净天空筛选整理自jnikita356大神的英文原创作品 CSS | font-display property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。