font-familyСвойство определяет шрифт , который применяется к выбранному элементу. Выбранный шрифт является не отдельным шрифтом, а «семейством», и, следовательно, может зависеть от других значений типографских свойств для выбора правильного начертания в семействе.
body ( font-family: Arial, Helvetica, sans-serif; )Значение может быть одним из следующих:
- Название семейства шрифтов, которое соответствует шрифту, встроенному на страницу или доступному в системе пользователя.
- Серия фамилий, разделенных запятыми, которые могут включать в себя родовое имя.
Если используется несколько фамилий, браузер выберет первое, которое он найдет встроенным на страницу @font-faceили установленным в операционной системе пользователя.
Поскольку font-familyне существует конкретного значения по умолчанию или начального значения; начальное значение всегда зависит от браузера и / или операционной системы.
Общие фамилии
Если для одного объявления используются несколько значений, рекомендуется, чтобы общее семейство было указано последним в качестве запасного варианта, чтобы обеспечить наилучшее качество типографики:
code ( font-family: Courier, Monaco, monospace; )В приведенном выше примере «Courier» и «Monaco» - это настоящие фамилии реальных шрифтов, тогда как «моноширинный» - это просто общая ссылка на любой моноширинный шрифт, установленный в системе пользователя.
Если первые два не установлены, браузер выберет лучший вариант, но только из моноширинных шрифтов. Без общего семейства шрифтом по умолчанию будет любой шрифт по умолчанию в системе пользователя (вероятно, с засечками или без засечек), что было бы нежелательно.
Родовые фамилии включают в себя serif, sans-serif, cursive, fantasy, и monospace.
Если фамилия совпадает с родовой фамилией, фамилия должна быть заключена в кавычки, чтобы указать, что она не родовая.
Семейные имена из нескольких слов
Если фамилия содержит несколько слов, разделенных пробелами, рекомендуется указать фамилию в кавычках (одинарных или двойных):
code ( font-family: "Times New Roman", Georgia, serif; )Это не всегда необходимо, но обычно безопаснее включать кавычки для любого имени семейства, которое имеет пробелы или специальные символы.
Поддержка браузера
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Работает | Работает | Работает | Работает | Работает | Работает | Работает |