font-family

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

Что такое шрифт, что такое семейство шрифтов и чем они отличаются?

Шрифт — это набор символов в одном начертании, из которых составляется текст. Похожие по стилю, но разные по начертанию шрифты объединяются в семейства. Например, Arial Bold — это шрифт, а Arial — семейство шрифтов.

Внутри семейства может быть множество шрифтов разных начертаний, например: Arial Regular, Arial Italic, Arial Bold, Arial Black, Arial Narrow и т.д.

Семейство шрифтов также называют гарнитурой.

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

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

Зададим разные font-family для заголовков и для основного текста:

        
          
          <h1>Этот заголовок написан шрифтом Roboto с жирностью 500 без засечек</h1><p>А параграф — шрифтом Roboto Slab Regular с засечками.</p><div class="generic">  <h2>Для второго заголовка установлен тип семейства sans-serif</h2>  <p>Тип семейства шрифтов этого параграфа указан как serif — это гарнитура с засечками,    установленная в системе по умолчанию.</p></div>
          <h1>Этот заголовок написан шрифтом Roboto с жирностью 500 без засечек</h1>
<p>А параграф — шрифтом Roboto Slab Regular с засечками.</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-family: "21st Century", fantasy;.

На практике

Скопировать ссылку "На практике" Скопировано

Светлана Коробцева советует

Скопировать ссылку "Светлана Коробцева советует" Скопировано

🛠 Почти все HTML-элементы наследуют значение font-family от родителя, поэтому зачастую достаточно указать шрифтовое семейство один раз, для тега <html>. Но из этого правила есть исключения:

• <input>;
• <textarea>;
• <select>;
• <button>.

У этих элементов есть свои стили по умолчанию. Не забывайте указывать необходимое шрифтовое семейство font-family для этих элементов напрямую или наследовать значение свойства от родительских элементов при помощи inherit.

+ Развернуть

Алёна Батицкая советует

Скопировать ссылку "Алёна Батицкая советует" Скопировано

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

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

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

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

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

+ Развернуть