font
Оновлено: 29.03.2023
font
Універсальна властивість, яка дає змогу одночасно задати кілька характеристик шрифту і тексту.
Коротка інформація
| Значення за замовчуванням | Залежить від використання |
| Успадковується | Так |
| Застосовується | До всіх елементів |
| Анімується | Так |
Синтаксис
font: [font-style||font-variant||font-weight||font-stretch] font-size [/line-height] font-family
Значення
В якості обов'язкових значень властивості font вказується розмір шрифту і його сімейство. Решта значень є опціональними і задаються за бажанням. Для докладного ознайомлення дивіться інформацію про кожну властивість окремо.
Допускається як значення використовувати ключові слова, що визначають шрифт різних елементів операційної системи користувача.
| caption | Шрифт для тексту елементів форм на кшталт кнопок. |
| icon | Шрифт для тексту під іконками. |
| menu | Шрифт, що застосовується в меню. |
| message-box | Шрифт для діалогових вікон. |
| small-caption | Шрифт для підписів до невеликих елементів керування. |
| status-bar | Шрифт для рядка стану вікон. |
Приклад
p { font: 12pt/10pt sans-serif; }З типографіки пішов запис вказувати через слеш розмір шрифту і висоту рядка. Тому 12pt у цьому випадку означає розмір основного тексту в пунктах, а 10pt - висоту рядка. Як сімейство вказується рубаний шрифт (sans-serif).
p { font: bold italic 110% serif; }Значення bold встановлює жирне накреслення тексту, а italic - курсивне. У цьому разі їхній порядок не важливий, тому bold і italic можна поміняти місцями. Розмір тексту задається у відсотках, а як гарнітура використовується шрифт із зарубками (serif).
p { font: normal small-caps 12px/14px fantasy; }Значення small-caps належить властивості font-variant і встановлює текст у вигляді капітелі (великі літери зменшеного розміру). Значення normal застосовується відразу до двох властивостей: font-style і font-weight.
Об'єктна модель
Об'єкт.style.font