CSS свойство font-family позволяет устанавливать шрифт для текста HTML элементов.

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

Пример:

p {font-family:Arial;}

Безопасными шрифтами называют шрифты, вероятность поддержки которых на любом компьютере с любой установленной ОС близка к 100%.

Список безопасных шрифтов:

• Arial
• Arial Black
• Courier New
• Comic Sans MS
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana

Пример:

<p style='font-family:Arial;'>Демонстрация шрифта Arial.</p>

<p style='font-family:"Arial Black";'>Демонстрация шрифта Arial Black.</p>

<p style='font-family:"Comic Sans MS";'>Демонстрация шрифта Comic Sans MS.</p>

<p style='font-family:"Courier New";'>Демонстрация шрифта Courier New.</p>

<p style='font-family:Georgia;'>Демонстрация шрифта Georgia.</p>

<p style='font-family:Impact;'> Демонстрация шрифта Impact.</p>

<p style='font-family:"Times New Roman";'>Демонстрация шрифта Times New Roman.</p>

<p style='font-family:"Trebuchet MS";'>Демонстрация шрифта Trebuchet MS.</p>

<p style='font-family:Verdana;'>Демонстрация шрифта Verdana.</p>

Обратите внимание: если Вы хотите использовать небезопасные шрифты, но не хотите использовать новые свойства, используйте резервные шрифты, о которых рассказано далее.

3. Резервные шрифты

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

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

Пример:

/* Если на компьютере пользователя нет шрифта Verdana, то будет использован Times New Roman, если
на компьютере нет Times New Roman, то будет использован Arial */
p {font-family:Verdana,"Times New Roman",Arial;}

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

В CSS шрифты делятся на следующие "семейства":

• Serif шрифты данного семейства имеют небольшие засечки на концах символов. Примеры шрифтов данного семейства: Times New Roman, Georgia.
• Sans-Serif шрифты данного семейства не имеют засечек. Примеры: Arial, Arial Black, Trebuchet MS, Verdana.
• Monospace все символы шрифтов данного семейства занимают одинаковую ширину. Примеры: Courier New.
• Fantasy семейство "причудливых" шрифтов использующихся в основном для создания красочных заголовков. Примеры: Impact
<ursive семейство шрифтов рукописного начертания. Примеры: Comic Sans MS.

Пример:

/* Если на компьютере пользователя нет шрифта Verdana, то будет использован Arial, если на компьютере нет Arial, то будет использоваться один из шрифтов
семейства Sans-Serif имеющихся на компьютере */
p {font-family:Verdana,Arial,sans-serif;}

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

CSS свойство font-size устанавливает размер шрифта HTML элементов. Размер шрифта можно задать двумя способами:

• Абсолютный способ
Этот способ по сравнению со следующим удобнее, но его использование может привести к несоответствию при отображении одной и той же страницы в различных браузерах.

Данный способ позволяет задавать размер шрифта в абсолютных единицах таких как: пиксели (px) или проценты (%).

Пример:

p.fz1 {font-size:20px;}
p.fz2 {font-size:30px;}
p.fz3 {font-size:13px;}


• Относительный способ
Данный способ помогает избежать проблем с несоответствием при отображении страницы в разных браузерах, так как все размеры устанавливаются относительно.
Для задания размера шрифта данным способом используются единицы em. 1em эквивалентен размеру шрифта в браузере по умолчанию и равен 16px.
Обратите внимание: W3C рекомендует для задания шрифта использовать именно этот способ.


Пример:

p.fz1 {font-size:1.2em;}
p.fz2 {font-size:1.5em;}
p.fz3 {font-size:1.15em;}


Обратите внимание: не используйте свойство font-size для того, чтобы оформлять абзацы как заголовки. Всегда используйте для определения абзацев тэги p, а для заголовков h1-h6.

5. Стиль шрифта

Свойство font-style позволяет сделать шрифт HTML элемента курсивным.

Свойство font-weight позволяет изменять толщину шрифта.

Пример:

p.italic {font-style:italic;}
p.fz1 {font-weight:bold;}


Следующие задания предлагаю выполнить самостоятельно.

Практическое задание 1

Оформите элементы согласно их описанию:

Данный абзац написан шрифтом Arial Black и имеет размер 20 пикселей.

Данный абзац написан курсивным шрифтом Courier New и имеет размер 24 пикселя.

Данный абзац написан жирным шрифтом Verdana и имеет размер 10 пикселей.

Данный абзац написан шрифтом Georgia и имеет размер 2.5em.

Данный абзац написан курсивным шрифтом Comic Sans MS и имеет размер 1.3em.