CSS :: Свойство font-family
css-свойство font-family (от англ. font family – семейство шрифта) устанавливает шрифт, который будет использоваться внутри элемента.
Характеристики
- Значение по умолчанию: шрифт, используемый браузером по умолчанию (обычно Times New Roman).
- Применяется: ко всем элементам.
- Наследуется: да.
- Анимируется: нет.
- JavaScript: object.style.fontFamily="value".
Синтаксис
font-family: <шрифт> [, <шрифт>[, ...]]
Значения
В качестве значения свойство принимает через запятую имена шрифтов или названия семейства шрифтов. Если в названии шрифта содержатся пробелы, то его нужно указывать в кавычках. Также при выборе шрифтов необходимо учитывать тот факт, что в операционных системах разных пользователей могут быть установлены собственные наборы шрифтов. Поэтому, если хочется применить к элементу какой-нибудь экзотический шрифт, нужно обязательно учитывать эту особенность. В таких случаях обычно первыми указывают редкие шрифты, затем более распространенные, а в конце указывают семейство шрифтов. Если браузер не находит первого шрифта на компьютере пользователя, он начинает искать второй шрифт и так до конца списка указанных в качестве значения шрифтов. Это повышает вероятность того, что хотя бы один и указанных шрифтов будет на компьютере пользователя. Если указанных шрифтов не будет обнаружено, браузер начнет самостоятельно подбирать шрифты из указанного списка семейств шрифтов.
В любой операционной системе по умолчанию доступны следующие стандартные семейства шрифтов:
- serif – шрифты с засечками;
- sans-serif – шрифты без засечек (рубленые шрифты);
- cursive – курсивные шрифты (часто напоминают рукописный текст);
- fantasy – декоративные (художественные) шрифты;
- monospace – моноширинные шрифты (все буквы одинаковой ширины).
Если указанные в качестве значения свойства font-family шрифты не будут найдены браузером на компьютере пользователя, а название семейства шрифтов будет отсутствовать, то браузер использует шрифт, установленный по умолчанию. Обычно это шрифт Times New Roman.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-fonts-3/#propdef-font-family
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/font-family
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> .f_1{ font-family: arial, tahoma, sans-serif; } .f_2{ font-family: gabriola; } .f_3{ font-family: "high tower text", sans-serif; } .f_4{ font-family: "monotype corsiva", serif; } .f_5{ font-family: verdana, arial; } </style> </head> <body> <p class="f_1"> Ко мне применяется шрифт Arial. </p> <p class="f_2"> Ко мне применяется шрифт Gabriola. </p> <p class="f_3"> Ко мне применяется шрифт семейства sans-serif. </p> <p class="f_4"> Ко мне применяется шрифт Monotype Corsiva. </p> <p class="f_5"> Ко мне применяется шрифт Verdana. </p> </body> </html>
Пример №1