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;
} 

Ещё по теме

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

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

Комментарии

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

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

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

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


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

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

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

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

Как избежать эффекта Упячки при загрузке картинок 2 Разработчик, который не думает, а просто делает — не нужен? 4 Что делает тег meta с атрибутом name="viewport"? Зачем его указывать? Автотесты «на пальцах» 1




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

Хочу научиться сторителлингу 12 2 Как совместить информационный стиль и текст для поисковиков? 7 В бюро есть таймтрекинг для сотрудников? 5