Свойства CSS

Меню

font-family

Поддержка браузерами

12.0+ 4.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

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

  • family-name (имя шрифта) - название определённого шрифта из какого-нибудь семейства шрифтов, например: times, courier, arial, и т.д. Если название шрифта содержит пробелы, оно должно быть заключено в одиночные или двойные кавычки, например: "Times New Roman".
  • generic-family (семейство шрифтов) - набор шрифтов, обладающих общими характеристиками. Следующие семейства шрифтов по умолчанию доступны в любой операционной системе: serif, sans-serif, cursive, fantasy, monospace.

Описание стандартных семейств шрифтов:

  • serif - шрифты с засечками
  • sans-serif - шрифты без засечек
  • cursive - представляют собой шрифты с большим количеством плавных красивых элементов оформления и всевозможных завитушек - это попытка повторить на компьютере рукописный текст
  • fantasy - художественные и декоративные шрифты
  • monospace - моноширинные шрифты, все символы которых имеют одинаковую фиксированную ширину

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

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

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

Чаще всего при указании свойства font-family, используют "безопасные" (стандартные) Web-шрифты.

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

Значение по умолчанию: зависит от браузера
Применяется: ко всем элементам
Анимируется: нет
Наследуется: да
Версия: CSS1
Синтаксис JavaScript: object.style.fontFamily="arial,sans-serif"

Синтаксис

font-family: имя шрифта [, имя шрифта[, ...]] | inherit;

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

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

Пример

CSS Свойство:
font-family:
Результат:
Меняйте значение свойства! Наблюдайте за разницей.
CSS Код:
div {
font-family: Georgia;
}
Кликните на любое значение свойства, чтобы увидеть результат