font

Универсальное свойство, которое позволяет одновременно задать несколько характеристик шрифта и текста.

Краткая информация

Значение по умолчанию Зависит от использования
Наследуется Да
Применяется Ко всем элементам
Анимируется Да

Синтаксис

font: [font-style||font-variant||font-weight||font-stretch] font-size [/line-height] font-family
Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Значения

В качестве обязательных значений свойства 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.

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>font</title> <style> .layer1 { font: 12pt sans-serif; } h1 { font: 2em serif; } </style> </head> <body> <div class="layer1"> <h1>Экзистенциальный либерализм</h1> <p>Карл Маркс исходил из того, что типология средств массовой коммуникации неизбежна.</p> </div> </body> </html>

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

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

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

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

Объект.style.font

Спецификация

Спецификация Статус
CSS Fonts Module Level 3 Возможная рекомендация
CSS Level 2 (Revision 1) Рекомендация
CSS Level 1 Рекомендация

Браузеры

4 12 1 6 1 1
1 1 6 1

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.
Текст и шрифт