@font-face
CSS @-правило вказує спеціальний шрифт для відображення текста. Шрифт може бути завантажений з зовнішнього сервера або встановлено локально на комп'ютері користувача. Якщо функція local()
вказує ім'я шрифта то його пошук буде відбуватися на комп'ютері користувача. Інакше ресурси шрифти вказані з використанням функції url()
будуть завантажені і використані
Дозвіл авторам впроваджувати їх власні шрифти дає можливість стилізувати контент без обмежень в так званих "безпечних" шрифтах (Це такі шрифти,що широко використовуються та визнані як загальнодоступні). Можливість вказувати ім'я локально встановлених шрифтів дає можливість налаштовувати шрифт більш гнучко без залежності від інтернет з'єднання.
Поширеним випадком є використання url()
і local()
разом, що дає змогу використовувати втановлений користувачем шрифт і завантажувати шрифт у разі його відсутності на користувацькому пристрої.
@font-face
@-правило може бути використане не лише на вищому рівні CSS, а й всередині будь-якого @-правила.
@font-face { font-family: "Open Sans"; src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); }
Синтаксис
Опис
font-display
- Вказує як шрифт відображатиметься в залежності від того чи він завантажений та готовий до використання.
font-family
- Задає ім'я, що буде використовуватися для задання властивостей шрифта.
font-stretch
- Значення
font-stretch
. Починаючи з Firefox 61 (та інших сучасних браузерів)font-stretch
також допускає задання двох значень для вказання діапазону, що підтримується шрифтом, наприклад:font-stretch: 50% 200%;
font-style
- Значення
font-style
. Починаючи з Firefox 61 (і інших сучасних браузерів)font-style
.також допускає задання двох значень для вказання діапазону, що підтримується шрифтом, наприклад:font-style: oblique 20deg 50deg;
font-weight
- Значення
font-weight
. Починаючи з Firefox 61 (і інших сучасних браузерів)font-weight
також допускає задання двох значень для вказання діапазону, що підтримується шрифтом, наприклад:font-weight: 100 400;
font-variant
- Значення
font-variant
. font-feature-settings
- Дозволяє контролювати інші розширені можлифості OpenType шрифтів.
font-variation-settings
- Дозволяє здійснювати низькорівневий контроль над варіаціями шрифтів OpenType чи TrueType, вказуючи назви осей з чотирьох букв для зміни разом з їх значеннями.
src
-
Вказує ресурс, що містить дані шрифта. Це може бути URL для віддаленого файлу шрифта чи ім'я для шрифта на комп'ютері користувача.
Щоб дати браузеру підказку який вибрати формат ресурсу шрифта, формат можна вказати в середині функції
format()
:src: url(ideal-sans-serif.woff) format("woff"), url(basic-sans-serif.ttf) format("truetype");
Достіпні типи:
"woff"
,"woff2"
,"truetype"
,"opentype"
,"embedded-opentype"
, і"svg"
. unicode-range
- Діапазон Unicode кодів, що буде використовуватись в шрифті.
Формальний синтаксис
@font-face { [ font-family: <family-name>; ] || [ src: <src>; ] || [ unicode-range: <unicode-range>; ] || [ font-variant: <font-variant>; ] || [ font-feature-settings: <font-feature-settings>; ] || [ font-variation-settings: <font-variation-settings>; ] || [ font-stretch: <font-stretch>; ] || [ font-weight: <font-weight>; ] || [ font-style: <font-style>; ] }where
<family-name> = <string> | <custom-ident>+
Приклади
Цей приклад просто вказує завантажуваний шрифт для використання і застосовує його до всього тіла документа:
<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>
В цьому прикладі використовується локальний шрифт користувача "Helvetica Neue Bold"; якщо у користувача цей шрифт не встановлений тоді натомість використовується завантажуваний шрифт "MgOpenModernaBold.ttf":
@font-face { font-family: MyHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; }
MIME-типи шрифтів
Формат | MIME-тип |
---|---|
TrueType | font/ttf |
OpenType | font/otf |
Web Open File Format | font/woff |
Web Open File Format 2 | font/woff2 |
Нотатки
- Веб шрифти підлягають одному і тому ж обмеженню доменів (файли шрифтів повинні знаходитись на тому ж домен, що і сторінка на яких вони використовуться) , HTTP контроль доступу використовується для полегшення цього обмеження.
@font-face
не може бути оголошеним в CSS селекторі. Наприклад наступне не працюватиме:.className { @font-face { font-family: MyHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; } }
Специфікація
Специфікація | Статус | Коментар |
---|---|---|
WOFF File Format 2.0 The definition of 'WOFF2 font format' in that specification. |
Recommendation | Специфікація фомату шрифта з новим алгоритмом стиснення |
WOFF File Format 1.0 The definition of 'WOFF font format' in that specification. |
Recommendation | Специфікація формата шрифта |
CSS Fonts Module Level 3 The definition of '@font-face' in that specification. |
Candidate Recommendation | Початкове визначення |
Підтримка браузерів
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
@font-face | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 4 | Opera Full support 10 | Safari Full support 3.1 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 2 | Samsung Internet Android Full support 1.0 |
SVG fonts | Chrome No support 1 — 38 | Edge No support No | Firefox No support No | IE No support No | Opera No support 15 — 25 | Safari Full support 3.2 | WebView Android No support ≤37 — 38 | Chrome Android No support 18 — 38 | Firefox Android No support No | Opera Android No support 14 — 25 | Safari iOS Full support 3 | Samsung Internet Android No support 1.0 — 3.0 |
WOFF | Chrome Full support 6 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 9 | Opera Full support 11.1 | Safari Full support 5.1 | WebView Android Full support 4.4 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 11.1 | Safari iOS Full support 5 | Samsung Internet Android Full support 1.0 |
WOFF 2 | Chrome Full support 36 | Edge Full support 14 | Firefox
Full support
39
| IE No support No | Opera Full support 23 | Safari
Full support
10
| WebView Android Full support 37 | Chrome Android Full support 36 | Firefox Android
Full support
39
| Opera Android Full support 24 | Safari iOS Full support 10 | Samsung Internet Android Full support 3.0 |
font-display | Chrome Full support 72 | Edge No support No | Firefox Full support 58 | IE No support No | Opera Full support 60 | Safari Full support 11.1 | WebView Android Full support 72 | Chrome Android Full support 72 | Firefox Android Full support 58 | Opera Android Full support 51 | Safari iOS Full support 11.3 | Samsung Internet Android No support No |
font-family | Chrome Full support 4 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 6 | Opera Full support 10 | Safari Full support 3.1 | WebView Android Full support 2.2 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 3.1 | Samsung Internet Android Full support 1.0 |
font-feature-settings | Chrome No support No | Edge No support No | Firefox
Full support
34
| IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
34
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
font-stretch | Chrome Full support 62 | Edge Full support 17 | Firefox Full support 62 | IE No support No | Opera Full support 49 | Safari Full support 10.1 | WebView Android Full support 62 | Chrome Android Full support 62 | Firefox Android Full support 62 | Opera Android Full support 41 | Safari iOS Full support 10.3 | Samsung Internet Android Full support 6.0 |
font-style | Chrome Full support 4 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 4 | Opera Full support 10 | Safari Full support 3.1 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 2 | Samsung Internet Android Full support 1.0 |
font-variation-settings | Chrome Full support 62 | Edge No support No | Firefox
Full support
60
| IE No support No | Opera Full support 49 | Safari No support No | WebView Android Full support 62 | Chrome Android Full support 62 | Firefox Android
Full support
60
| Opera Android Full support Yes | Safari iOS No support No | Samsung Internet Android Full support 8.0 |
font-weight | Chrome Full support 4 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 4 | Opera Full support 10 | Safari Full support 3.1 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 2 | Samsung Internet Android Full support 1.0 |
src | Chrome Full support 4 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 6 | Opera Full support 10 | Safari Full support 3.1 | WebView Android Full support 2.2 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 3.1 | Samsung Internet Android Full support 1.0 |
unicode-range | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 36 | IE Full support 9 | Opera Full support Yes | Safari Full support 3.2 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 36 | Opera Android Full support Yes | Safari iOS Full support 3 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
- No support
- No support
- Non-standard. Expect poor cross-browser support.
- Non-standard. Expect poor cross-browser support.
- Deprecated. Not for use in new websites.
- Deprecated. Not for use in new websites.
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.