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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
|
---
title: '@font-face'
slug: Web/CSS/@font-face
tags:
- '@font-face'
- At-rule
- CSS
- CSS Fonts
- NeedsTranslation
- Reference
- типографика
translation_of: Web/CSS/@font-face
---
<div><strong><code>@font-face</code></strong> <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/CSS/At-rule">@-правило</a> <font>позволяет указать </font><font>шрифты для отображения текста на веб-страницах, которые могут быть загружены либо с удаленного сервера, либо с компьютера пользователя. Если в правиле была объявлена функция </font><code>local()</code>, с названием шрифта, то будет производиться поиск на компьютере пользователя, и в случае обнаружения будет использован этот шрифт. Иначе будет скачан и использован шрифт, указанный в функции <code>url()</code>.</div>
<div> </div>
<div><code>@font-face</code> позволяет разрабатывать контент не ограничиваясь набором "безопасных" шрифтов (шрифтов, которые настолько распространены, что считаются доступными по умолчанию). Возможность определить локально установленный шрифт позволяет более гибко настраивать шрифты не полагаясь на соединение с интернетом. </div>
<div> </div>
<div>Распространенным случаем является одновременное использование <code>url()</code> и <code>local()</code>, чтобы использовать локальный шрифт, если он доступен, или иначе скачать копию шрифта.</div>
<div> </div>
<div><font>Это правило может использоваться не только на верхнем уровне CSS, но и внутри любого </font> <a href="/en-US/docs/CSS/At-rule">@-правила</a>.</div>
<pre class="brush: css no-line-numbers">@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}</pre>
<h2 id="Синтаксис">Синтаксис</h2>
<h3 id="Descriptors">Descriptors</h3>
<dl>
<dt>{{cssxref("@font-face/font-display", "font-display")}}</dt>
<dd>Определяет как отображается шрифт, основываясь на том, был ли он загружен и готов ли к использованию.</dd>
</dl>
<dl>
<dt>{{cssxref("@font-face/font-family", "font-family")}}</dt>
<dd>Указывает имя шрифта, которое будет использоваться для задания свойств шрифта.</dd>
<dt>{{cssxref("@font-face/font-stretch", "font-stretch")}}</dt>
<dd>Значение {{cssxref("font-stretch")}}.</dd>
<dt>{{cssxref("@font-face/font-style", "font-style")}}</dt>
<dd>Значение {{cssxref("font-style")}}.</dd>
<dt>{{cssxref("@font-face/font-weight", "font-weight")}}</dt>
<dd>Значение {{cssxref("font-weight")}}.</dd>
<dt>{{cssxref("@font-face/font-variant", "font-variant")}}</dt>
<dd>Значение {{cssxref("font-variant")}}.</dd>
<dt>{{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}</dt>
<dd>Позволяет контролировать другие расширенные особенности OpenType-шрифтов.</dd>
<dt>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</dt>
<dd>Позволяет осуществлять низкоуровневый контроль над вариациями OpenType и TrueType шрифтов, указывая четырёхбуквенные названия осей для изменения вместе с их значениями.</dd>
<dt>{{cssxref("@font-face/src", "src")}}</dt>
<dd><font>Задает ресурс, содержащий данные шрифта. Это может быть URL-адрес расположения удаленного файла шрифта или имя шрифта на компьютере пользователя.<br>
<br>
Чтобы дать браузеру возможность выбрать наиболее подходящий формат шрифта, его можно указать при объявлении внутри функции <code>format()</code>:</font><br>
<pre><code>src: url(ideal-sans-serif.woff) format("woff"),
url(basic-sans-serif.ttf) format("opentype");</code>
</pre>
<p>Список доступных форматов: <code>"woff"</code>, <code>"woff2"</code>, <code>"truetype"</code>, <code>"opentype"</code>, <code>"embedded-opentype"</code>, и <code>"svg"</code>.</p>
</dd>
</dl>
<dl>
<dt>{{cssxref("@font-face/unicode-range", "unicode-range")}}</dt>
<dd>Диапазон Unicode кодов, который будет использоваться в шрифте.</dd>
</dl>
<h3 id="Formal_syntax">Formal syntax</h3>
{{csssyntax}}
<h2 id="Примеры">Примеры</h2>
<p>Этот пример просто указывает загружаемый шрифт для использования и применяет его ко всему телу документа:</p>
<p><a href="https://mdn.mozillademos.org/files/7775/webfont-sample.html">Смотреть живой пример</a></p>
<pre class="brush: html"><html>
<head>
<title>Web Font Sample</title>
<style type="text/css" media="screen, print">
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
}
body { font-family: "Bitstream Vera Serif Bold", serif }
</style>
</head>
<body>
This is Bitstream Vera Serif Bold.
</body>
</html>
</pre>
<p>В этом примере используется локальный пользовательский шрифт "Helvetica Neue Bold"; если у пользователя этот шрифт не установлен (используются два различных имени), тогда вместо него используется загружаемый шрифт с названием "MgOpenModernaBold.ttf":</p>
<pre class="brush: css">@font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
</pre>
<h2 id="MIME-типы_шрифтов">MIME-типы шрифтов</h2>
<table>
<thead>
<tr>
<th>Формат</th>
<th>MIME-тип</th>
</tr>
</thead>
<tbody>
<tr>
<td>TrueType</td>
<td><code>font/ttf</code></td>
</tr>
<tr>
<td>OpenType</td>
<td><code>font/otf</code></td>
</tr>
<tr>
<td>Web Open File Format</td>
<td><code>font/woff</code></td>
</tr>
<tr>
<td>Web Open File Format 2</td>
<td><code>font/woff2</code></td>
</tr>
</tbody>
</table>
<h2 id="Заметки">Заметки</h2>
<ul>
<li>Веб шрифты попадают под правило ограничения домена (файлы шрифтов должны находиться на том же самом домене, что и использующая их страница), если это ограничение не снимается с помощью <a href="/ru/docs/Словарь/CORS">CORS</a>.</li>
<li>@font-face не может быть объявлен внутри CSS-селектора. Следующий пример не будет работать:
<pre class="brush: css; example-bad">.className {
@font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
}</pre>
</li>
</ul>
<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('WOFF2.0', '', 'WOFF2 font format')}}</td>
<td>{{Spec2('WOFF2.0')}}</td>
<td>Спецификация нового формата шрифта с новым алгоритмом сжатия</td>
</tr>
<tr>
<td>{{SpecName('WOFF1.0', '', 'WOFF font format')}}</td>
<td>{{Spec2('WOFF1.0')}}</td>
<td>Спецификация формата шрифта</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}</td>
<td>{{Spec2('CSS3 Fonts')}}</td>
<td>Первоначальное определение</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("css.at-rules.font-face")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/WOFF">About WOFF</a></li>
<li><a href="https://everythingfonts.com/font-face">Everythingfonts font-face generator</a></li>
<li><a class="external" href="http://www.fontsquirrel.com/fontface/generator">FontSquirrel @font-face generator</a></li>
<li><a class="external" href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Beautiful fonts with @font-face</a></li>
<li><a class="external" href="http://openfontlibrary.org/">Open Font Library</a></li>
<li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms530757(VS.85).aspx">Microsoft Developer Network (MSDN) @font-face reference</a></li>
<li><a class="external" href="http://caniuse.com/woff">When can I use WOFF?</a></li>
<li><a class="external" href="http://caniuse.com/svg-fonts">When can I use SVG Fonts?</a></li>
</ul>
<p>{{CSSRef}}</p>
|
