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
|
---
title: '@font-face'
slug: Web/CSS/@font-face
tags:
- '@-правила'
- '@font-face'
- CSS
- CSS Шрифти
- Посилання
- типографія
- шрифти
translation_of: Web/CSS/@font-face
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary"><strong><code>@font-face</code></strong> <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/CSS/At-rule">@-правило</a> вказує спеціальний шрифт для відображення текста. Шрифт може бути завантажений з зовнішнього сервера або встановлено локально на комп'ютері користувача. Якщо функція </span><code>local()</code> вказує ім'я шрифта то його пошук буде відбуватися на комп'ютері користувача. Інакше ресурси шрифти вказані з використанням функції <code>url()</code> будуть завантажені і використані</p>
<p>Дозвіл авторам впроваджувати їх власні шрифти дає можливість стилізувати контент без обмежень в так званих "безпечних" шрифтах (Це такі шрифти,що широко використовуються та визнані як загальнодоступні). Можливість вказувати ім'я локально встановлених шрифтів дає можливість налаштовувати шрифт більш гнучко без залежності від інтернет з'єднання.</p>
<p>Поширеним випадком є використання <code>url()</code> і <code>local()</code> разом, що дає змогу використовувати втановлений користувачем шрифт і завантажувати шрифт у разі його відсутності на користувацькому пристрої.</p>
<p><code>@font-face</code> @-правило може бути використане не лише на вищому рівні CSS, а й всередині будь-якого <a href="/en-US/docs/Web/CSS/At-rule#Conditional_group_rules">@-правила</a>.</p>
<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="Опис">Опис</h3>
<dl>
<dt>{{cssxref("@font-face/font-display", "font-display")}}</dt>
<dd>Вказує як шрифт відображатиметься в залежності від того чи він завантажений та готовий до використання.</dd>
<dt>{{cssxref("@font-face/font-family", "font-family")}}</dt>
<dd>Задає ім'я, що буде використовуватися для задання властивостей шрифта.</dd>
<dt>{{cssxref("@font-face/font-stretch", "font-stretch")}}</dt>
<dd>Значення {{cssxref("font-stretch")}} . Починаючи з Firefox 61 (та інших сучасних браузерів) {{cssxref("font-stretch")}} також допускає задання двох значень для вказання діапазону, що підтримується шрифтом, наприклад: <code>font-stretch: 50% 200%;</code></dd>
<dt>{{cssxref("@font-face/font-style", "font-style")}}</dt>
<dd>Значення {{cssxref("font-style")}}. Починаючи з Firefox 61 (і інших сучасних браузерів) {{cssxref("font-style")}}.також допускає задання двох значень для вказання діапазону, що підтримується шрифтом, наприклад: <code>font-style: oblique 20deg 50deg;</code></dd>
<dt>{{cssxref("@font-face/font-weight", "font-weight")}}</dt>
<dd>Значення {{cssxref("font-weight")}}. Починаючи з Firefox 61 (і інших сучасних браузерів) {{cssxref("font-weight")}} також допускає задання двох значень для вказання діапазону, що підтримується шрифтом, наприклад: <code>font-weight: 100 400;</code></dd>
<dt>{{cssxref("@font-face/font-variant", "font-variant")}}</dt>
<dd>Значення {{cssxref("font-variant")}}.</dd>
<dt>{{cssxref("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>
<p>Вказує ресурс, що містить дані шрифта. Це може бути URL для віддаленого файлу шрифта чи ім'я для шрифта на комп'ютері користувача.</p>
<p>Щоб дати браузеру підказку який вибрати формат ресурсу шрифта, формат можна вказати в середині функції <code>format()</code>:</p>
<pre class="brush: css">src: url(ideal-sans-serif.woff) <strong>format("woff")</strong>,
url(basic-sans-serif.ttf) <strong>format("truetype")</strong>;</pre>
<p>Достіпні типи: <code>"woff"</code>, <code>"woff2"</code>, <code>"truetype"</code>, <code>"opentype"</code>, <code>"embedded-opentype"</code>, і <code>"svg"</code>.</p>
</dd>
<dt>{{cssxref("@font-face/unicode-range", "unicode-range")}}</dt>
<dd>Діапазон Unicode кодів, що буде використовуватись в шрифті.</dd>
</dl>
<h3 id="Формальний_синтаксис">Формальний синтаксис</h3>
{{csssyntax}}
<h2 id="Приклади">Приклади</h2>
<p>Цей приклад просто вказує завантажуваний шрифт для використання і застосовує його до всього тіла документа:</p>
<p><a href="https://mdn.mozillademos.org/files/7775/webfont-sample.html">Дивитися live приклад</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="/en-US/docs/HTTP_access_control">HTTP контроль доступу</a> використовується для полегшення цього обмеження.</li>
<li><code>@font-face</code> не може бути оголошеним в 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="Підтримка_браузерів">Підтримка браузерів </h2>
<div class="hidden">Таблиця підтримки на цій сторінці згенерована з структурованих даних будь ласка прогляньте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і надішлінть нам pull request.</div>
<p>{{Compat("css.at-rules.font-face")}}</p>
<h2 id="Прогляньте_також">Прогляньте також</h2>
<ul>
<li><a href="/en-US/docs/WOFF"> Про 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/">Гарні шрифти @font-face</a></li>
<li><a class="external" href="http://openfontlibrary.org/">Open Font Library</a></li>
<li><a class="external" href="http://caniuse.com/woff">Коли я можу використовувати WOFF?</a></li>
<li><a class="external" href="http://caniuse.com/svg-fonts">Коли я можу використовувати SVG Fonts?</a></li>
<li><a href="https://coolfont.org">Безкоштовні круті шрифти</a></li>
</ul>
|
