font

Оновлено: 26.05.2022

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.

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства font

Объектная модель

Объект.style.font

Браузеры

font

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

font