1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
---
title: font-display
slug: Web/CSS/@font-face/font-display
tags:
- CSS
- 参考
- 字体
translation_of: Web/CSS/@font-face/font-display
---
<div>{{CSSRef}}</div>
<p><code>font-display</code> 属性决定了一个<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">@font-face</span></font> 在不同的下载时间和可用时间下是如何展示的。</p>
<h2 id="字体显示时间轴">字体显示时间轴</h2>
<p>字体显示时间线基于一个计时器，该计时器在用户代理尝试使用给定下载字体的那一刻开始。时间线分为三个时间段，在这三个时间段中指定使用字体的元素的渲染行为。</p>
<dl>
<dt>字体阻塞周期</dt>
<dd>如果未加载字体，任何试图使用它的元素都必须渲染不可见的后备字体。如果在此期间字体已成功加载，则正常使用它。</dd>
<dt>字体交换周期</dt>
<dd>如果未加载字体，任何尝试使用它的元素都必须呈现后备字体。如果在此期间字体已成功加载，则正常使用它。</dd>
<dt>字体失败周期</dt>
<dd>如果未加载字体，用户代理将其视为导致正常字体回退的失败加载。</dd>
</dl>
<p>{{cssinfo}}</p>
<h2 id="语法">语法</h2>
<pre class="brush: css">/* 关键字值 */
font-display：auto;
font-display：block;
font-display：swap;
font-display：fallback;
font-display：optional;</pre>
<h3 id="属性值">属性值</h3>
<dl>
<dt><code>auto</code></dt>
<dd>字体显示策略由用户代理定义。</dd>
<dt><code>block</code></dt>
<dd>为字体提供一个短暂的阻塞周期和无限的交换周期。</dd>
<dt><code>swap</code></dt>
<dd>为字体提供一个非常小的阻塞周期和无限的交换周期。</dd>
<dt><code>fallback</code></dt>
<dd>为字体提供一个非常小的阻塞周期和短暂的交换周期。</dd>
<dt><code>optional</code></dt>
<dd>为字体提供一个非常小的阻塞周期，并且没有交换周期。</dd>
</dl>
<h3 id="形式化语法">形式化语法</h3>
{{csssyntax}}
<h2 id="例子">例子</h2>
<pre class="brush: css">@ font-face {
font-family：ExampleFont;
src：url（/path/to/fonts/examplefont.woff）format（'woff'），
url（/path/to/fonts/examplefont.eot）format（'eot'）;
font-weight：400;
font-style：normal;
font-display：fallback;
}</pre>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Fonts', '#font-display-desc', 'font-display')}}</td>
<td>{{Spec2('CSS4 Fonts')}}</td>
<td>初始定义</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div class="hidden">
<p>此页面上的兼容性表格由结构化数据生成。如果您想为数据做出贡献，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>并向我们发送拉取请求。</p>
</div>
<p>{{Compat("css.at-rules.font-face.font-display")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li>{{cssxref("@font-face/font-family", "font-family")}}</li>
<li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
<li>{{cssxref("@font-face/font-style", "font-style")}}</li>
<li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
<li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
<li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
<li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
<li>{{cssxref("@font-face/src", "src")}}</li>
<li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li>
</ul>
|
