font-family¶

Свойство font-family устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого.

Список шрифтов может включать одно или несколько названий, разделённых запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки.

Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берётся следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif, sans-serif, cursive, fantasy или monospace. Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщённым именем, которое задаёт вид начертания.

Синтаксис¶

/* A font family name and a generic family name */
font-family: Gill Sans Extrabold, sans-serif;
font-family: 'Goudy Bookletter 1911', sans-serif;

/* A generic family name only */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;

/* Global values */
font-family: inherit;
font-family: initial;
font-family: unset;

Значения¶

Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:

serif: шрифты с засечками (антиквенные), типа Times;
sans-serif: рубленные шрифты (шрифты без засечек или гротески), типичный представитель Arial;
cursive: курсивные шрифты;
fantasy: декоративные шрифты;
monospace: моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).

Значение по-умолчанию: Шрифт, установленный в браузере по умолчанию. Обычно это Times New Roman.

Применяется ко всем элементам

Спецификации¶

Описание и примеры¶

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>font-family</title>
    <style>
      h1 {
        font-family: Geneva, Arial, Helvetica, sans-serif;
      }
      p {
        font-family: Georgia, 'Times New Roman', Times, serif;
      }
    </style>
  </head>
  <body>
    <h1>Танцы</h1>
    <p>Венгры страстно любят танцевать, особенно ценятся национальные танцы</p>
  </body>
</html>