@font-face
@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. |
Recommendation | Початкове визначення |
Підтримка браузерів
BCD tables only load in the browser