2.5. CSS шрифты

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

Окунаясь в многообразие шрифтов, не забывайте, что текст основного содержимого веб-страницы должен быть в первую очередь читабельным. Не рекомендуется использовать более двух шрифтов на странице, а желаемого контраста можно достигнуть за счет комбинирования шрифтов разной толщины, размера, начертания или же при помощи цвета.

Более подробно с правилами веб-типографики вы сможете ознакомиться в предложенной статье.

Форматирование шрифта с помощью CSS-свойств

1. Семейство шрифтов font-family

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

Важно! Если в названии шрифта имеются пробелы или символы (например, #, $, %), то оно заключается в кавычки. Это делается для того, чтобы браузер мог понять, где начинается и заканчивается название шрифта.

font-family
Значения:
family-name Название (имя) семейства шрифтов, например, Times, Courier, Arial. Рекомендуется указывать вместе с базовым семейством.
generic-family Базовое семейство. CSS определяет пять базовых семейств шрифтов:
Шрифты с засечками — Serif (Times New Roman, Times, Garamond, Georgia)
Рубленые шрифты — Sans-serif (Helvetica, Geneva, Arial, Verdana, Trebuchet, Univers)
Моноширинные шрифты — Monospace (Courier, Courier New, Andele Mono)
Рукописные шрифты — Cursive (Comic Sans, Gabriola, Monotype Corsiva, Author, Zapf Chancery)
Аллегорические шрифты (Western, Woodblock, Klingon)
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

2. Стиль начертания шрифта font-style

Свойство позволяет выбрать стиль начертания для текста. При этом разница между курсивом и наклонным текстом заключается в том, что курсивное начертание вносит небольшие изменения в структуру каждой буквы, а наклонный текст представляет собой наклонную версию прямого текста. Наследуется.

font-style
Значения:
normal Значение по умолчанию, устанавливает для текста обычное начертание шрифта.
italic Выделяет текст курсивом.
oblique Устанавливает наклонное начертание шрифта.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

font-style

Рис. 1. Свойство font-style

3. Вариант начертания шрифта font-variant

Свойство позволяет выводить шрифт малыми заглавными буквами. Наследуется.

font-variant
Значения:
normal Значение по умолчанию, выводит текст обычным начертанием.
small-caps Все строчные буквы заменяются на малые прописные, которые отличаются от обычных прописных слегка измененными пропорциями и уменьшенным размером. Очень похоже на text-transform: uppercase, отличие состоит в том, что здесь прописные буквы имеют разные размеры.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

font-variant

Рис. 2. Свойство font-variant

4. Насыщенность шрифта font-weight

Свойство задаёт насыщенность шрифта.

font-weight
Значения:
normal Значение по умолчанию, устанавливает нормальную насыщенность шрифта. Эквивалентно значению насыщенности, равной 400.
bold Делает шрифт текста полужирным. Эквивалентно значению насыщенности, равной 700.
bolder Насыщенность шрифта будет больше, чем у предка.
lighter Насыщенность шрифта будет меньше, чем у предка.
100, 200, 300, 400, 500, 600, 700, 800, 900 Значение 100 соответствует самому легкому варианту начертания шрифта, а 900 — самому плотному. При этом, эти числа не определяют конкретной плотности, т.е. 100, 200, 300 и 400 могут соответствовать одному и тому же варианту слабой насыщенности начертания шрифта; 500 и 600 — средней насыщенности, а 700, 800 и 900 могут выводить одинаковое очень насыщенное начертание. Распределение плотности так же зависит от количества уровней насыщенности, определенных в конкретном семействе шрифтов.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

font-weight

Рис. 3. Свойство font-weight

5. Размер шрифта font-size

Свойство определяет размер (кегль) шрифта.

font-size
Значения:
absolute-size xx-small, x-small, small, medium, large, x-large, xx-large. Абсолютные размеры определены относительно друг друга и коэффициент масштабирования между двумя соседними абсолютными размерами составляет примерно 1,5 при переходе от меньшего к большему и 0,66 при переходе от большего к меньшему. В качестве стандартного размера принимается medium.
relative-size smaller, larger. Относительные размеры обусловливают изменение размера шрифта элемента относительно родителя. При этом размер шрифта может выйти за рамки размеров, предполагаемых для xx-small и xx-large.
длина Размер шрифта устанавливается с помощью положительных значений единиц длины — px, как целых, так и дробных.
% Относительное значение, вычисляется на основании любого размера, унаследованного от родительского элемента. Обеспечивает более точную настройку вычисляемого размера шрифта. Задание размеров шрифта с помощью em эквивалентно процентному значению.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

6. Цвет шрифта

Свойство задаёт цвет шрифта с помощью различных систем цветопередачи. Свойство наследуется.

color
Значения:
HEX В данной системе используются арабские десятичные цифры от 0 до 9 и латинские буквы от A до F. Для веб-дизайна взяты 16 основных цветов, так называемый шестнадцатеричный код цвета #RRGGBB, где каждая пара отвечает за свою долю цвета: RR – красный, GG – зеленый и BB – синий. Каждая доля цвета находится в диапазоне от 00 до FF.
RGB RedGreenBlue, обозначает количество соответствующего тона (красный,зеленый,синий) в получаемом цвете.
RGBA Система цветопередачи RGB, расширенная параметром Alpha, который используется для управления смешиванием цветов. Значение поддерживается IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+. Последнее число определяет степень прозрачности, задается значением от 0 до 1, где 0 соответствует полной прозрачности, а 1 — непрозрачности.
HSL Hue, Saturation, Lightness (Intensity) — оттенок (тон), насыщенность, светлота, цветовая модель описания цветов.
Первое значение — оттенок — определяется градусом поворота цветового спектра по часовой стрелке от 0° до 360°, где 60° — желтый, 120° — зеленый, 180° — голубой, 240° — синий, 300° — фиолетовый. Второе значение определяет насыщенность выбранного оттенка и указывается в процентах в диапазоне от 0% до 100%. Чем ближе данное значение к 100%, тем цвет более чистый и сочный.
Светлота или яркость (Lightness) указывается в процентах, чем выше процент, тем ярче становится цвет. Значения 0% и 100% обозначают соответственно чёрный (отсутствие света) и белый (засвеченный) цвета, в независимости от того, какой оттенок из цветового круга был выбран изначально. Оптимальное значение яркости цвета равняется 50%. Значение поддерживается IE9+, Firefox, Chrome, Safari, Opera 10+
HSLA Задает прозрачность (через Альфа-канал) элемента.
Тон (от 0 до 360), насыщенность (от 0% до 100%), светлота (от 0% до 100%), прозрачность (от 0 до 1). Значение поддерживается
IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+.
имя цвета Значение цвета задаётся кроссбраузерным названием. В настоящий момент существует 140 названий цветов.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

1.7. Краткая запись свойств шрифта

Свойство font объединяет все свойства шрифта, используемого на веб-странице. Если явное значение какого-либо свойства не нужно, то оно опускается.

Например: