Учебник HTML 

Урок 5. Свойства и значения (шрифт)

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

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

Существует три семейства, использующиеся для создания сайтов и понимаемые Интернет-браузерами:

• serif (шрифты Times New Roman,  Garamond, Georgia),
• sans-serif (шрифты Verdana, Arial, Trebuchet),
• monospace (шрифты Courier, Courier New, Andele Mono).

Дело в том, что далеко не все шрифты отображаются в браузерах компьютеров посетителей вашего сайта. Для того, чтобы шрифт отображался, он должен быть установлен на каждом конкретном компьютере, а это практически нереально. Поэтому, если вы хотите, чтобы пользователи видели ваш сайт не так, как придется, а именно в том шрифте, какой вы ему задаете или близком к нему, всегда следует указывать варианты свойства "font-family", а также, для верности, название семейства шрифтов.
Пример:

p {font-family: Verdana, Arial, sans-serif};

Что это значит? Мы хотим, чтобы наш сайт отображался шрифтом Verdana. Если этого шрифта нет в компьютере пользователя, браузер ищет следующий похожий шрифт – Arial. Если и его нет, то подставляется любой имеющийся из семейства sans-serif – близкого по стилю шрифту Verdana.

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

p {font-family: "New Time Roman", Garamond, serif};

2. font-weight – толщина шрифта

У этого свойства может быть только два значения: normal (нормальный) или bold (жирный). По умолчанию идет нормальный шрифт, его указывать не обязательно. Пример:

p {font-family: "New Time Roman", Garamond, serif; font-weight: bold};

3. font-size – размер шрифта

Существует четыре единицы измерения размера шрифта: px, pt, %, em. Но в подавляющем большинстве случаев используются px – пиксели и em – относительные единицы. Пример:

h1 {font-size: 30px};
h1 {font-size: 2em}:

В браузере мы видим:

Заголовок, размер шрифта 30 пикселей

Заголовок, размер шрифта 2 em

4. font-variant – свойство для выбора нормального вида шрифта (normal) или шрифта без заглавных букв – small-caps.

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

Пример:

p {font-variant: small-caps};

5. font-style. Свойство имеет три значения: normal (по умолчанию), italic (курсив) и oblique (наклонный шрифт).

Курсив и наклонный шрифт, при всей их похожести – не одно и то же. Курсив имитирует рукописный текст, а наклонный образуется путем наклона букв нормального шрифта.
Пример:

h2 {font-family: Verdana, sans-serif; font-style: oblique;}

Так же как и в предыдущем уроке, когда мы рассматривали свойство "background", все значения свойства "font" следует писать в одну строчку через пробел. Пример:

h1 {font: italic bold 20px Verdana, sans-serif;}

См. также

• Следующий урок: Свойства и значения (текст)
• Предыдущий урок: Свойства и значения (фон)