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

Гарнитура шрифта в CSS

Свойство font-family

Шрифт, который будет использоваться для оформления текста содержимого того или иного элемента, задается при помощи свойства font-family.

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

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

Правило h1 {font-family: Verdana, Arial, sans-serif;} означает, что все заголовки первого уровня должны отображаться шрифтом Verdana. Если его нет на компьютере пользователя, браузер подставит шрифт Arial, а если и его нет, то любой доступный из семейства sans-serif.

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

Начертание или стиль

Свойство font-style

Начертание шрифта задает свойство font-style. Может иметь три значения:

normal — обычное начертание
italic — курсивное начертание
oblique — наклонное начертание. Курсив и наклонный шрифт похожи, но не одно и то же. Курсив это специальный шрифт, иммитирующий рукописный. Наклонный образуется путем наклона обычных знаков вправо.

Свойство font-weight

Насыщенность шрифта задает свойство font-weight. Основные значения: normal — обычный и bold — полужирный. Также может быть значение от 100 до 900 с шагом 100. Значение normal эквивалентно 400, а значение bold — 700.

Существуют (но применяются редко) и другие значения: bolder - жирное и lighter - светлое. Поэксперементируйте с ними и Вы поймете разницу.

Размер шрифта

Свойство font-size

Свойство font-size задает размер шрифта. Размер может быть задан несколькими способами, но я рекомендую использовать пикселы. Все прочие зависят от настроек браузера, а этот способ во всех браузерах дает одинаковый результат.

Свойство font

Это свойство позволяет задать одновременно несколько атрибутов стиля шрифта. В результате мы значительно экономим время и делаем таблицу стилей более легкой.

Вышеприведенную таблицу мы можем записать кратко и получим тот же самый результат. Все значения нужно записывать через пробел в такой последовательности:
font-style_font-weight_font-size_font-family.

Ни одино свойство не является обязательным, поэтому неиспользуемые значения можно опустить. Ему присвоится значение по умолчанию.

В изучении CSS, как и в изучении HTML, очень важна практика. Так что попрактикуйтесь и переходите к странице свойства текста в CSS >>