С помощью CSS Вы можете управлять шрифтом элементов.

Установка шрифта

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>

Обратите внимание: в CSS3 было добавлено новое свойство @font-face, позволяющее использовать на веб-страницах небезопасные шрифты. Узнать о данном свойстве больше можно здесь: CSS3 Учебник - Шрифт.

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

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

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

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

/* Если на компьютере пользователя нет шрифта 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
• Cursive семейство шрифтов рукописного начертания. Примеры: Comic Sans MS.

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

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

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.

Стиль шрифта

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

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

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

Сделайте сами

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

1. Данный абзац написан шрифтом Arial Black и имеет размер 20 пикселей.
2. Данный абзац написан курсивным шрифтом Courier New и имеет размер 24 пикселя. 
3. Данный абзац написан жирным шрифтом Verdana и имеет размер 10 пикселей. 
4. Данный абзац написан шрифтом Georgia и имеет размер 2.5em.
5. Данный абзац написан курсивным шрифтом Comic Sans MS и имеет размер 1.3em.