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 | Указывает, что значение наследуется от родительского элемента. |
Пример
font-family: Georgia;
}