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

Браузери

font

Переглянути сумісність з Can I use?

font