Курс CSS: Семейство шрифта

Многим знакома фраза «Поиграйся со шрифтами» — великая мантра, когда внешний вид текста не устраивает. Для того, чтобы указать шрифт, используется правило font-family, позволяющее выбрать один или несколько шрифтов, которые будут использоваться в документе.

<style>
  .new-font {
    font-family: Arial, Futura;
  }
</style>

<p class="new-font">Абзац</p>

Шрифты подключаются из тех, которые установлены в вашей системе. По этой причине стоит выбирать «распространённые шрифты», так как у другого пользователя их может не быть. Помимо этого возможно подключать шрифты со сторонних сервисов, таких как Google Fonts, или загружать их непосредственно на ваш сервер, на котором расположен сайт.

Наиболее распространёнными шрифтами являются:

• Times New Roman
• Arial
• Tahoma
• Verdana
• Courier New

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

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

• serif — шрифты с засечками (антиквы). Ярким представителем таких шрифтов является Times New Roman
• sans-serif — шрифты без засечек (гротеск). Наиболее знакомыми такими шрифтами являются Arial и Verdana
• cursive — курсивные шрифты
• fantasy — декоративные шрифты. Это семейство используется реже всего. Дело в том, что декоративные шрифты слишком разные, чтобы они были взаимозаменяемые
• monospace — моноширинные шрифты. К ним относятся шрифты, в которых все символы имеют одинаковую ширину. Очень часто их используют программисты в текстовых редакторах

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

Пример из начала урока при добавлении универсального семейства будет выглядеть следующим образом:

<style>
  .new-font {
    font-family: Arial, Futura, sans-serif;
  }
</style>

<p class="new-font">Абзац</p>

Теперь, если у пользователя в системе нет шрифтов Arial или Futura, будет выбран системный шрифт без засечек.

Задание

Добавьте в редактор параграф с классом verdana-text и установите для него шрифт Verdana. Стили запишите в теге <style>. Не забудьте указать универсальное семейство шрифтов — шрифты без засечек