x
 
Светлана Кузьминова
8 февраля 2018
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

font-family: Bureauserif, Georgia, serif;

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


С помощью 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;
} 

Ещё по теме

Расшифровка списка на devhints.io

P. S. Это был совет о веб-разработке. Хотите знать всё о коде, тестах, фронтенд-разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Занятия с 27 августа. Мы напишем вам, когда будет открыт набор.
 

Поделиться
Отправить

Комментарии

Максим Софронов
8 февраля 2018

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

Андрей Потапов
15 февраля 2018

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

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

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Заметил, что сайт бюро перешел на HTTPS. Расскажите, как переходили? 1 Как сделана залипающая кнопка на странице книжной полки Расскажите о дизайне REST API 1




Недавно всплыло

2 Как объяснить возрастному руководителю проектов, что не стоит жить совдепией? 1 Почему в главном меню на сайте бюро вы не подчёркиваете ссылки? 3 1