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

Примеры

HTML Результат

htmlCodes

<!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