Шрифт

Многим знакома фраза «Поиграйся со шрифтами» — великая мантра, когда внешний вид текста не устраивает. Для того, чтобы указать шрифт используется правило 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. Не забудьте указать универсальное семейство шрифтов. В данном случае это шрифты без засечек.


Нашли ошибку? Есть что добавить? Пулреквесты приветствуютсяhttps://github.com/hexlet-basics
Упражнение доступно только авторизованным пользователям.

Пожалуйста, авторизуйтесь, это необходимо для отслеживания прогресса выполнения уроков. Если у вас ещё нет учётной записи, то сейчас самое время создать аккаунт.