font-family

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

С помощью font-family можно задать семейство шрифта, которым будет написан текст. Можно прописать конкретный шрифт, например "Arial". А можно задать желаемый тип шрифта: например, с засечками serif или без засечек sans-serif.

Пример

Секция статьи "Пример"

Допустим, мы хотим, чтобы текст был набран шрифтом PT Sans. Если такой шрифт не установлен у пользователя, то пускай откроется в Arial. Если и такого нет, то пусть будет стандартный шрифт без засечек:

        
          
          body {  font-family: "PT Sans", "Arial", serif;}
          body {
  font-family: "PT Sans", "Arial", serif;
}

        
        
          
        
      

Как это понять

Секция статьи "Как это понять"

«PT Sans», «Arial», «Times New Roman» — это примеры семейств шрифтов. С помощью font-family можно задать любой шрифт для любого текстового элемента на странице.

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

Как пишется

Секция статьи "Как пишется"

Обычно в font-family задают сразу несколько шрифтов, перечисляя их через запятую. На первом месте ставят самый редкий шрифт из тех, что хотят использовать для этого элемента. Затем — похожий, но более распространённый шрифт. В самом конце — желаемый тип шрифта. Браузер проходит по списку слева направо и использует первый найденный на компьютере шрифт.

Значения

Секция статьи "Значения"
  • Имя шрифта — шрифт, который будет использоваться на странице. Например, Times или Helvetica.
  • Семейство шрифтов — прописывается последним на случай, если ни одного из шрифтов нет на компьютере пользователя:
    • serif — шрифт с засечками, например, «Times».
    • sans-serif — шрифт без засечек, например, «Arial».
    • monospace — моноширинные шрифты с одинаковой шириной каждого символа. Похожи на текст, набранный на печатной машинке. Например, шрифт «Courier».
    • cursive — курсивный шрифт или italic.
    • fantasy — декоративный шрифт.
    • system-ui — использует стандартный шрифт на устройстве пользователя.

Ещё пример

Секция статьи "Ещё пример"

Зададим разные шрифты для заголовков и для основного текста:

        
          
          <h1>Этот заголовок написан шрифтом Roboto без засечек</h1><p>А параграф — шрифтом Roboto Slab с засечками.</p><div class="generic">  <h2>Для второго заголовка установлено семейство sans-serif</h2>  <p>Семейство шрифтов этого параграфа указано как serif — это шрифт с засечками,    установленный в системе по умолчанию.</p></div>
          <h1>Этот заголовок написан шрифтом Roboto без засечек</h1>
<p>А параграф — шрифтом Roboto Slab с засечками.</p>
<div class="generic">
  <h2>Для второго заголовка установлено семейство sans-serif</h2>
  <p>Семейство шрифтов этого параграфа указано как serif — это шрифт с засечками,
    установленный в системе по умолчанию.</p>
</div>

        
        
          
        
      
        
          
          h1 {  font-family: Roboto, Geneva, Arial, Helvetica, sans-serif;}p {  font-family: "Roboto Slab", Georgia, "Times New Roman", Times, serif;}.generic h2 {  font-family: sans-serif;}.generic p {  font-family: serif;}
          h1 {
  font-family: Roboto, Geneva, Arial, Helvetica, sans-serif;
}

p {
  font-family: "Roboto Slab", Georgia, "Times New Roman", Times, serif;
}

.generic h2 {
  font-family: sans-serif;
}

.generic p {
  font-family: serif;
}

        
        
          
        
      
Открыть демо в новой вкладке

Подсказки

Секция статьи "Подсказки"

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

💡 Не забывай добавлять желаемый тип шрифта (serif, sans-serif или другой), так как нет гарантий, что нужный вам шрифт найдётся на компьютере пользователя.

На практике

Секция статьи "На практике"

Алёна Батицкая

Секция статьи "Алёна Батицкая"

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

🛠 Всегда указывай несколько вариантов шрифтов в следующем порядке:

  • Кастомный шрифт;
  • Стандартный системный шрифт;
  • Семейство шрифтов.

Это нужно на случай, если кастомный шрифт по какой-то причине не загрузился на устройстве пользователя. Если не указывать альтернативу (так называемый фолбэк), то при незагрузке кастомного шрифта дизайн страницы скорее всего полностью сломается. Если указать альтернативный системный шрифт, максимально близкий к кастомному по внешнему виду, то дизайн останется прежним 🎉

Семейство шрифтов указывают на случай, если ни кастомный шрифт не загрузился, ни системный шрифт не нашёлся в системе (такое возможно, поскольку в разных ОС разный набор шрифтов).