Свойство font-family
Синтаксис
font-family: [[<название-семейства> | <общее-семейство>] [, [ <название-семейства> | <общее-семейство> ] ]* ] | inherit;
Описание
Свойство font-family
указывает семейство шрифтов применяемое для отображения текста элемента. При этом в качестве одного пункта из списка значений может быть указано как какое-либо определённое семейство шрифтов, так и общее семейство шрифтов.
Применяется: | ко всем элементам; |
---|---|
Наследование: | отсутствует; |
Проценты: | не используются; |
Медиа: | визуальные. |
В CSS шрифты разбиваются на 5 общих семейств шрифтов:
- Общее семейство serif. Глифы шрифтов имеют засечки и, как правило, определённый интервал. Serif шрифты представляют собой «официальный» стиль текста и часто используются в официальных документах. Примеры семейств шрифтов: «Constantia», «Times New Roman», «Liberation Serif», «Droid Serif», «Century Schoolbook L», «FreeSerif», «Linux Libertine G», «Nimbus Roman No9 L».
- Общее семейство sans-serif. Глифы шрифтов имеют низкую контрастность и простые штриховые окончания. Как правило, имеют определённый интервал. Примеры семейств шрифтов: «Droid Sans», «FreeSans», «Nimbus Sans L».
- Общее семейство cursive. Используется более неформальный стиль письменности. Текст выводимый с помощью таких шрифтов больше похож на надпись сделанную ручкой или кистью. Примеры семейств шрифтов: «Antonella script», «Monplesir script», «Rigoletto», «Alexandra Script», «Bickham Script Two», «Burlak», «Liana», «Aquarelle».
- Общее семейство fantasy. Включает в себя декоративные или выразительные шрифты, которые содержат выразительные или экспрессивные символы. (Они не включают в себя Pi или Picture шрифты, которые не имеют реальных символов.) Примеры семейств шрифтов: «Aurora», «CRYSIS», «Impact», «Masquerade», «Arnold BocklinC», «Benny Blanco», «elektrodisiac», «Epilog», «Crystal», «Wenatchee», «Young Love ES», «NERVOUS».
- Общее семейство monospace. Включает в себя шрифты с фиксированной шириной символов. Моноширинные шрифты часто используются для отображения образцов компьютерного кода. Примеры семейств шрифтов: «Liberation Mono», «FreeMono», «Nimbus Mono L», «Andale Mono», «Hack».
Одновременно через запятую можно указать сразу несколько различных семейств шрифтов (общих семейств шрифтов) [font-family: "Times New Roman", "Liberation Serif";
]. При этом, если браузер не может применить первое семейство шрифтов, то предпринимаются попытки применить следующее семейство шрифтов, указанное в данном свойстве.
Примечание
Для обеспечения более надёжного исполнения замысла, авторам рекомендуется так же указывать общее семейство шрифтов [font-family: "Times New Roman", "Liberation Serif", serif;
].
Если ни одно из указанных семейств шрифтов не может быть применено к тексту, то применяется либо общее семейство шрифтов (если оно указано), либо семейство шрифтов родительского элемента, либо семейство шрифтов, предусмотренное браузером в качестве значения по умолчанию.
Условия использования
Если в названии семейства шрифтов присутствуют пробелы, то название такого семейства должно быть заключено в кавычки. При этом рекомендуется заключать в кавычки все названия семейств шрифтов.
JavaScript
[объект]
Поддержка браузерами
Спецификация
Значения
- <общее-семейство>
- Указывает общее семейство шрифтов.
font-family: "Hack", "Liberation Mono", monospace;
- <название-семейства>
- Указывает название семейства шрифтов.
font-family: "Hack", "Liberation Mono", monospace;
- inherit
- Указывает, что элемент должен унаследовать параметры родительского элемента.
font-family: inherit;
Начальное значение: Зависит от агента пользователя.
Пример использования
<html>
<head>
<meta charset="utf-8">
<title>Свойство font-family</title>
<style type="text/css">
.fFamily1 { font-family: "Times New Roman", "Liberation Serif", serif; }
.fFamily2 { font-family: cursive; }
</style>
</head>
<body>
<h1 style="font-family: fantasy;">Шрифт текста</h1>
<p><span class="fFamily1">Жизнь надо прожить так, чтобы на небесах сказали "Повтори"</span>. <span class="fFamily2">Или в аду "Добро пожаловать, наш Господин"</span>.</p>
</body>
</html>