CSS @font-face - font-display_CSS 菜鸟教程

CSS at 规则 @font-face 的描述符 font-display 根据字体是否以及何时下载和可以使用字体来确定字体的显示方式。

当用户代理尝试使用给定的下载字体时，一个时间开始，这决定了字体显示时间线。此时间线分为三个时期，这三个时期决定了使用此字体的元素的呈现行为：

字体块周期：当任何元素尝试使用未加载的字体时，必须呈现不可见的回退字体。在此期间成功加载字体后，将正常使用。
字体交换周期：当任何元素尝试使用未加载的字体时，必须呈现回退字体。在此期间成功加载字体后，将正常使用。
字体失败期：当字体未加载时，用户代理会将其视为加载失败，从而导致正常的字体回退。

可能的值

CSS 描述符 font-display 可以具有以下值之一：

auto：用户代理定义字体显示的策略。
block：字体被赋予一个短暂的块周期和无限交换周期。
swap：字体被赋予一个非常短的块周期和无限的交换周期。
fallback：字体表面被赋予一个非常短的阻止期和短暂的交换期。
optional：字体被赋予极短的阻止期和无交换期。

注意：首选项 gfx.downloadable_fonts.fallback_delay 和 gfx.downloadable_fonts.fallback_delay_short 指定了 Firefox 中短周期和极短周期的持续时间。

语法

font-display: auto | block | swap | fallback | optional;

CSS font-display - auto 值

当 font-display 作为 auto 传递时，它会按照用户代理的定义呈现输出。在以下示例中，font-family 是 Sansation Light Font，因此 h1 元素中的文本将以指定的字体呈现。

<html>
<head>	
<style> 		
	 	@font-face {
	 	 	 font-family: "Sansation Light Font";
	 	 	 src: url(font/SansationLight.woff);
	 	 	 font-display: auto;
	 	}	

	 	h1{
	 	 	 font-family: "Sansation Light Font";
	 	 	 text-decoration-line: underline;
	 	 	 color: green;
	 	}
</style>
</head>
<body>
	 	<h1>font-display: auto</h1>	
</body>
</html>

CSS font-display - optional 值

以下示例演示了 font-display： optional 的用法：

<html>
<head>	
<style> 		
	 	@font-face {
	 	 	 font-family: "Sansation Light Font";
	 	 	 src: url(font/SansationLight.woff);
	 	 	 font-display: optional;
	 	}	

	 	h1{
	 	 	 font-family: "Sansation Light Font";
	 	 	 text-decoration-line: underline;
	 	 	 color: green;
	 	}
</style>
</head>
<body>
	 	<h1>font-display: optional</h1>	
</body>
</html>

CSS font-display - block 值

以下示例演示了 font-display： block 的用法：

<html>
<head>	
<style> 		
	 	@font-face {
	 	 	 font-family: "Sansation Light Font";
	 	 	 src: url(font/SansationLight.woff);
	 	 	 font-display: block;
	 	}	

	 	h1{
	 	 	 font-family: "Sansation Light Font";
	 	 	 text-decoration-line: underline;
	 	 	 color: green;
	 	}
</style>
</head>
<body>
	 	<h1>font-display: block</h1>	
</body>
</html>

<< CSS 函数 fit-content() CSS @font-face - font-family >>