Семейства шрифтов

В CSS все шрифты делятся на пять семейств:

• serif — текстовые пропорциональные шрифты с засечками, например, такие как Times New Roman или Cambria;

• sans-serif — текстовые пропорциональные шрифты без засечек как, например: Arial, Calibri или Verdana;

• monospace — моноширинные шрифты, например, Courier New;

• cursive — декоративные шрифты имитирующие рукописный текст, например, Comic Sans MS;

• fantasy — дизайнерские декоративные шрифты, например, Impact.

Свойство font-size — кегль шрифта

Кегль шрифта также часто называют высотой шрифта. Если говорить более точно, то это высота кегельной площадки.

Кегль можно задавать в процентах. В этом случае он рассчитывается относительно кегля родительского элемента. Кегль элемента html в таком случае рассчитывается отно­си­тельно базового кегля, зависящего от настроек операционной системы и браузера.

Также можно использовать единицы em. 1em означает размер кегля родительского элемента, то есть 1em эквивалентен значению 100%.² Ниже приведены три эквивалентных объявления:

font-size: 67%;

font-size: 0.67em;

font-size: .67em;

Для указания размера кегля можно использовать пикселы (px) и другие единицы измерения. Однако это может вызвать проблемы с масштабированием.

Свойство font-style — управление наклоном

Для этого свойства существуют всего два фактически работающих значения:

• italic — курсив;

• normal — обычный прямой шрифт.

В стандарте также приводится значение oblique, но фактической разницы между ним и значением italic пока нет.

Свойство font-weight — насыщенность шрифта

Это свойство позволяет управлять насыщенностью (весом, жирностью) шрифта. Обычно оно принимает одно из двух строковых значений:

• bold — полужирный шрифт;

• normal — обычный шрифт.

В стандарте описаны значения bolder и lighter, но на практике они обрабатываются браузерами как значения bold и normal соответственно.

Кроме строковых значений допустимо указывать числовые: 100, 200, 300, 400, 500, 600, 700, 800 и 900. Значение 100 соответствует наименьшей насыщенности, а 900 в свою очередь — наибольшей. Фактически значения от 100 до 500 преобразуются в normal, а от 700 до 900 — в bold.

Значение 600 в IE обрабатывается особым образом — отображается шрифт про­ме­жу­точной между normal и bold насыщенности. Во всех остальных популярных браузерах это значение преобразуется в bold.

Свойство font — управление шрифтом

Свойство font является собирательным свойством и объединяет в себе шесть частных свойств font-family, font-size, font-style, font-variant, font-weight и line-height. Свойство font-variant предназначено для создания эффекта капители, но на практике еще не реализована его должная поддержка.

В отличие от многих других собирательных свойств, свойство font требует соблюдения порядка части параметров: кегль шрифта указывается предпоследним, а гарнитура в свою очередь — по­след­ней в списке значений. Кроме того, значения кегля и гарнитуры нельзя пропускать. Все остальные параметры можно не указывать и пропускать значения normal. Три приведенных ниже объявления эквивалентны:

font: normal normal 2em Arial, sans-serif;

font: normal 2em Arial, sans-serif;

font: 2em Arial, sans-serif;