CSS Веб-шрифти
CSS правило @font-face
Веб-шрифти дозволяють веб-дизайнерам використовувати шрифти, які не встановлені на комп’ютері користувача.
Коли ви знайшли/купили шрифт, який хочете використовувати, просто підключіть файл шрифту на своєму веб-сервері, і він буде автоматично підвантажуватись користувачу при необхідності.
Ваші "власні" шрифти визначаються в CSS правилі @font-face.
Різні формати шрифтів
TrueType Fonts (TTF)
TrueType - це стандарт шрифтів, розроблений в кінці 1980-х років компаніями Apple та Microsoft. TrueType є найбільш розповсюдженим форматом шрифтів для операційних систем Mac OS та Microsoft Windows.
OpenType Fonts (OTF)
OpenType - це формат для комп’ютерних шрифтів, що масштабуються. Він був побудований на TrueType і є зареєстрованим товарним знаком Microsoft. Шрифти OpenType зазвичай використовуються сьогодні на основних комп’ютерних платформах.
Web Open Font Format (WOFF)
WOFF - це формат шрифту для використання на вебсторінках. Він був розроблений в 2009 році й в настоящий час є рекомендацією W3C. WOFF - це, по суті, OpenType або TrueType зі стисканням та додатковими метаданими. Ціль полягає в тому, щоб підтримати розповсюдження шрифтів із сервера до клієнта мережею, яка має обмежену пропускну здатність.
Web Open Font Format (WOFF 2.0)
TrueType/OpenType шрифт, що забезпечує краще стискання, ніж WOFF 1.0.
SVG Шрифти/Форми
Шрифти SVG дозволяють використовувати SVG в якості символів при відображенні тексту. Специфікація SVG 1.1 визначає модуль шрифту, який дозволяє створювати шрифти в документі SVG. Ви також можете застосовувати CSS до документів SVG, а правило @font-face можна застосовувати до тексту в документах SVG.
Embedded OpenType Шрифти (EOT)
EOT-шрифти - це компактна форма шрифтів OpenType, розроблена Microsoft для використання як вбудованих шрифтів на вебсторінках.
Браузерна підтримка форматів шрифтів
Числа в таблиці вказують першу версію браузера, яка повністю підтримує формат шрифту.
| Формат шрифту | |||||
|---|---|---|---|---|---|
| TTF/OTF | 9.0* | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | Ні | 36.0 | 35.0* | Ні | 26.0 |
| SVG | Ні | 4.0 | Ні | 3.2 | 9.0 |
| EOT | 6.0 | Ні | Ні | Ні | Ні |
*IE: Формат шрифту працює лише в тому випадку, якщо він встановлений як такий, що "встановлюється".
*Firefox: За замовчуванням не підтримується, але може бути включений (необхідно встановити прапорець "true" щоб використовувати WOFF2).
Як використовувати потрібний шрифт?
В правилі @font-face спочатку визначте ім’я для шрифту (наприклад, myFirstFont), а потім вкажіть на файл шрифту.
Порада: Завжди використовуйте літери в нижньому регістрі для вказування URL-адреси шрифту. Літери в верхньому регістрі можуть дати неочікувані результати в Internet Explorer.
Щоб використовувати шрифт для елемента HTML, зверніться до імені шрифту (myFirstFont) через властивість font-family:
Приклад
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
Спробуйте самі »
Використання (напів)жирного тексту
Необхідно додати інше правило @font-face, що містить дескриптори для напівжирного тексту:
Приклад
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Спробуйте самі »
Файл "sansation_bold.woff" - це інший файл шрифту, що містить напівжирний шрифт для шрифту Sansation.
Браузери будуть використовувати це всякий раз, коли фрагмент тексту із сімейством шрифтів "myFirstFont" має відображатися напівжирним шрифтом.
Таким чином, ви можете мати багато правил @font-face для одного й того ж шрифту.
Перевірте себе за допомогою вправ!
CSS Дескриптори шрифтів
В наступній таблиці перераховані всі дескриптори шрифту, які можуть бути визначені всередині правила @font-face:
| Дескриптор | Значення | Опис |
|---|---|---|
| font-family | name | Обов’язковий. Визначає ім’я для шрифту |
| src | URL | Обов’язковий. Визначає URL файлу шрифту |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Необов’язковий. Визначає, як шрифт має бути розтягнуто. За замовчуванням це "normal" |
| font-style | normal italic oblique |
Необов’язковий. Визначає, як шрифт має бути стилізований. За замовчуванням це "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Необов’язковий. Визначає жирність шрифту. За замовчуванням це "normal" |
| unicode-range | unicode-range | Необов’язковий. Визначає діапазон символів UNICODE, які підтримує шрифт. За замовчуванням це "U+0-10FFFF" |
