С помощью 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.