Школа
Веб-разработка

Что за font‑family? Где его взять?

font‑family: Bureauserif, Georgia, serif;

Что за font‑family? Где его взять?

Светлана Кузьминова
8 фев 2018
👁 7252   🗩2
Веб-разработка

Что за font‑family? Где его взять?

font‑family: Bureauserif, Georgia, serif;

Что за font‑family? Где его взять?

Светлана Кузьминова
8 фев 2018
👁 7252   🗩2
Василий Половнёв
Технический директор бюро
Полезно
 1
1
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

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

Веб‑разработка
Полезно
 1
1
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

После типа шрифта ещё неплохо было бы указать шрифты для Эмоджи для разных систем: Apple Color Emoji, NotoColorEmoji, Segoe UI Emoji, Segoe UI Symbol.

Максим, расскажите, пожалуйста, как использовать Эмоджи шрифты.

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

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