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

Выбор шрифта для оформления текста осуществляется через стилевое свойство font-family. Оно устанавливает семейство шрифтов, которое будет использоваться для оформления текста. Список шрифтов может включать одно или несколько названий, разделённых запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в двойные или одинарные кавычки.

Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берётся следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность того, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif, sans-serif, cursive, fantasy или monospace. Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщённым именем, которое задаёт вид начертания (пример 1).

Универсальные семейства шрифтов:

  • serif — шрифты с засечками (антиквенные), типа Times;
  • sans-serif — рубленые шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
  • cursive — курсивные шрифты, обычно подставляется Comic Sans MS;
  • fantasy — декоративные шрифты; как правило, в Windows используется шрифт Impact, либо текст отображается шрифтом, установленным по умолчанию;
  • monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова, например, шрифт Courier.

Пример 1. Установка шрифта

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Установка шрифта</title>
  <style>
   body {
    font-family: 'Times New Roman', Times, serif;
   }
   td {
    font-family: Arial, sans-serif;
   }
   h1, h2, h3 {
    font-family: Verdana, Tahoma, Arial, sans-serif;
   }
  </style>
 </head>
 <body>
  …
 </body>
</html>

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 05.09.2017
Редакторы: Влад Мержевич
Курс по вёрстке сайта на CSS Grid