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
|
---
title: font-display
slug: Web/CSS/@font-face/font-display
translation_of: Web/CSS/@font-face/font-display
---
<div>{{CSSRef}}</div>
<h2 id="Описание">Описание</h2>
<p>Дескриптор <code>font-display</code> определяет то, как шрифт, подключённый через font face будет отображаться в зависимости от того, загрузился ли он и готов ли к использованию.</p>
<h3 id="Временная_шкала_отображения_шрифтов">Временная шкала отображения шрифтов</h3>
<p>Временная шкала отображения шрифтов основывается на таймере, который запускается в момент, когда пользовательский агент начинает попытки по применению загруженного шрифта. Эта временная шкала разделена на три отрезка, приведённых ниже, которые диктуют поведение рендеринга любых элементов с использованием шрифта.</p>
<dl>
<dt>Период блокировки шрифта (Font block period)</dt>
<dd>Если шрифт не загружен, любой элемент, который пытается его использовать, должен быть отрендерен с невидимым запасным шрифтом. Если за это время шрифт успешно загружается, то он используется, как обычно.</dd>
<dt>Период подмены шрифта (Font swap period)</dt>
<dd>Если шрифт не загружен, любой элемент, который пытается его использовать, должен быть отрендерен запасным шрифтом. Если за это время шрифт успешно загружается, то он используется, как обычно.</dd>
<dt>Период отказа шрифта (Font failure period)</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>auto</dt>
<dd>Стратегию загрузки шрифта определяет пользовательский агент.</dd>
<dt>block</dt>
<dd>Для шрифта задаётся короткий период блокировки и бесконечный период подмены.</dd>
<dt>swap</dt>
<dd>Для шрифта не задаётся период блокировки и задаётся бесконечный период подмены.</dd>
<dt>fallback</dt>
<dd>Для шрифта задаётся очень короткий период блокировки и короткий период подмены.</dd>
<dt>optional</dt>
<dd>Для шрифта задаётся очень короткий период блокировки и не задаётся период подмены.</dd>
</dl>
<h3 id="Официальный_синтаксис">Официальный синтаксис</h3>
{{csssyntax}}
<h2 id="Примеры">Примеры</h2>
<pre class="brush: css; highlight[7]">@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>
{{Specifications}}
<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
<p>{{Compat("css.at-rules.font-face.font-display")}}</p>
|
