Шрифты в CSS: применение свойства Font

css

Содержание:



Свойство FONT

Свойство Значения Пр* Нc*
font [[ font-style; font-variant; font-weight ] font-size [ ⁄ line-height]? font-family], caption, icon, menu, message-box, small-caption, status-bar, inherit + +
font-family [ НАЗВАНИЕ ШРИФТА, БАЗОВОЕ СЕМЕЙСТВО ], inherit + +
font-size xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, ВЫСОТА, %, inherit + +
font-style italic, oblique, normal, inherit + +
font-variant small-caps, normal, inherit + +
font-weight normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit + +

Сокращенная форма записи двух и более свойств, устанавливающих параметры шрифта элемента. Если не задано ключевое значение, например: icon, то, как минимум, необходимо указать размер и название шрифта и (или) семейство — (свойства Font-size и Font-family).

Применение:

h2 { font: 200% "Times New Roman";}
span { font: italic bolder 16px sans-serif;}
p { font: 14px 'Trebuchet MS', sans-serif;}

— для заголовка задан размер в процентах и название;
— для строчного элемента Span — курсив (свойство Font-style), толщина (свойство Font-weight), размер и базовое семейство;
— для абзаца — размер, название шрифта и базовое семейство:

шрифты в css: применение свойства font

Значения:

inherit — наследование от родительского элемента.

Остальные значения позволяют использовать системные шрифты ОС пользователя, а страница будет гармонировать с привычным для него интерфейсом. Подозреваю, что применяют их не часто:

caption — применяется для элементов управления, кнопок.
icon — в подписи иконок, значков.
menu — для меню, в т.ч. выпадающих элементов.
message-box — применяется в диалоговых окнах.
small-caption — для небольших элементов управления.
status-bar — для строк состояния окон.

Font-family

Свойство задаёт название шрифта и базовое семейство элемента. Желательно указывать несколько шрифтов и их базовое семейство, за исключением общепринятых, таких как Arial. Если веб-браузер не обнаружит наличие 1-го, то он будет подставлять каждый следующий.

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

Пример:

p { font-family: Georgia, "Times New Roman", Times, serif;} — шрифты и семейства перечисляются через запятую, а если в названии шрифта имеются пробелы, то его заключают в кавычки (любые).

Font-size

Свойство задаёт размер шрифта элемента, а точнее — высоту блока символов для данного шрифта, если свойством Line-height не задана другая высота строки.

Значения:

Высоту можно указывать в единицах, принятых в CSS, удобнее всего в px или процентах (от родительского элемента), отрицательные значения не применяются.

xx-small — xx-large — минимальное и максимальное абсолютные значения, промежуточные см. в таблице. Коэффициент масштабирования зависит от браузера.
smaller, larger — уменьшение или увеличение размера элемента относительно размера родителя с тем же коэффициентом.
inherit — наследование свойства родительского элемента.

Font-style

Свойство задаёт гарнитуру шрифта: курсивную или обычную, а наклонное начертание формирует браузер из обычной гарнитуры.

Значения:

italic — курсив.
oblique — наклонный шрифт.
normal — обычный.
inherit — наследование от родителя.

Font-variant

Свойства применяется для определения капители, которую может сформировать браузер.

Значения:

small-caps — курсив.
normal — обычный.
inherit — наследование свойства от родителя.

Пример:

p { font-variant: small-caps;}

А вот, что применение свойства даёт на практике в браузере Chrome для базовых семейств шрифтов: sans-serif (шрифты без засечек), serif (с засечками — результат идентичный), моноширинные и курсив:

пример использования свойства font-variant

Font-weight

Свойство задаёт насыщенность шрифта, или плотность его начертания — значение 400 соответствует normal.

Значения:

normal — обычный шрифт.
bold — полужирный.
bolder — жирный.
lighter — малонасыщенный.
100, 200, 300, 400, 500, 600, 700, 800, 900 — значения по условной шкале плотности.
inherit — наследование свойства родителя.

Содержание: