С помощью font-family браузер понимает, какой шрифт использовать для текста элемента:

h3 {
  font-family: Helvetica Neue, Arial, sans-serif;
}
​
p {
  font-family: Georgia, Times New Roman, serif;
}

Глава третья

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

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

В конце списка указано ключевое слово, описывающее тип шрифта: serif — с засечками, sans‑serif — без засечек, monospace — моноширинный. Если браузер доберётся до него, то возьмёт системный шрифт соответствующего типа.

Список в font-family зависит от шрифтов, которые вы хотите использовать на странице. Если вы рассчитываете на шрифты, которые уже есть у 99% пользователей, подсмотрите список на CSS Font Stack:

body {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-family: Trebuchet MS, Lucida Grande,
    Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
  font-family: Verdana, Geneva, sans-serif;
  ​
  font-family: Georgia, Times, Times New Roman, serif;
  font-family: Palatino, Palatino Linotype,
    Palatino LT STD, Book Antiqua, Georgia, serif;
  ​
  font-family: Consolas, monaco, monospace;
}

См. также советы Ани Даниловой о платных и бесплатных шрифтах и о веб‑шрифтах

Если вы используете нестандартные шрифты, например, Робото или Опен Санс из Гугль‑шрифтов, укажите шрифт и его тип:

См. также советы Ани Даниловой о платных и бесплатных шрифтах и о веб‑шрифтах

body {
  font-family: Open Sans, sans-serif;
}

Если вы рассчитываете на системный шрифт, который используется в интерфейсе операционной системы, используйте заклинание:

body {
  font-family: -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    Fira Sans,
    Droid Sans,
    Helvetica Neue,
    sans-serif;
} 

Ещё по теме

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы