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

Все семейства шрифтов делятся на 5 видов: serif, sans-serif, monospace, cursive и fantasy.

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

Значение по умолчанию: Зависит от браузера
Применяется к: Все элементы
Наследование: Да
Анимирование: Нет. Анимируемые свойства
Версия: CSS 1, 2, 3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

font-family: [ family-name | generic-family ] [, family-name | generic-family ] one or more pairs | initial | inherit

Примеры написания кода свойства font-family:

body {
    font-family: Arial, Helvetica, sans-serif;
}
h1 {
    font-family: "Times New Roman", Times, serif;
}

Если имя семейства шрифтов содержит более одного слова, оно должно быть заключено в кавычки, например: font-family: "Times New Roman", Serif;

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение Описание
family-name Название семейства шрифтов. Например, «Times» или «Helvetica» — это семейства шрифтов. Семейства шрифтов, содержащие пробелы, должны быть заключены в кавычки.
generic-family

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

Общие семейства шрифтов должно быть последней альтернативой в списке font-family. Вы можете использовать:

  • serif (Times)
  • sans-serif (Arial)
  • cursive (Zapf-Chancery)
  • fantasy (Western)
  • monospace (Courier)

О кроссбраузерности шрифтов см. Руководство по CSS Web Safe Fonts.

initial Устанавливает это свойство в значение по умолчанию.
inherit Если указан, связанный элемент принимает вычисленное значение своего родительского элемента font-family.

Поддержка браузеров

Свойство font-family поддерживается во всех основных браузерах.

Читайте также

Похожие посты

CSS-свойство clip

Определяет координаты области, которая будет кадрирована, т.е. содержимое за пределом этой области будет отрезано

CSS-свойство bottom

Задает смещение или отступ от нижнего края элемента

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.