CSS :: Свойство font

Сокращенное css-свойство font (от англ. font – шрифт) используется для определения сразу нескольких параметров шрифта и текста в одном объявлении.

Характеристики

Значение по умолчанию: см. каждое свойство.
Применяется: ко всем элементам.
Наследуется: да.
Анимируется: см. каждое свойство.
JavaScript: object.style.font="value".

Синтаксис

font: [font-style || font-variant || font-weight || font-stretch] font-size [/line-height] font-family

Значения

В качестве параметров свойство принимает через пробел значения свойств font-style, font-weight, font-variant. font-size, line-height, font-family. При этом размер шрифта и его семейство должны указываться обязательно. Также имеет значение порядок указания значений свойств: первыми, если они конечно будут указываться, должны записываться значения свойств font-style, font-variant или font-weight в любом порядке, затем необходимо указывать значение свойства font-size, а также при необходимости через слеш / значение свойства line-height, в конце указывается значение свойства font-family. В случае отсутствия значения какого-нибудь свойства браузер использует вместо него соответствующее значение по умолчанию.

Также в качестве значений свойства font допускается указывать специальные ключевые слова, которые задают шрифт, использующийся в соответствующих элементах операционной системы пользователя:

caption – шрифт текста элементов управления;
icon – шрифт текста под иконками;
menu – шрифт, использующийся в меню;
message-box – шрифт диалоговых окон;
small-caption – шрифт, использующийся для небольших элементов управления;
status-bar – шрифт, использующийся для строки состояния окон.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-fonts-3/#propdef-font

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/font

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
	
		.font_1{
		font: 1.2em/25px serif;
		}
		
		.font_2{
		font: bold italic 0.9em "courier new", serif;
		}
		
		.font_3{
		font: normal small-caps 1em/1.2em verdana;
		}
		
	</style>
	
</head>
<body>

	<p class="font_1">
		font_1{font: 1.2em/25px serif;}.<br>
		Здесь указаны размер, высота строки и семейство.
	</p>
	
	<p class="font_2">
		font_2{font: bold italic 0.9em "courier new", serif;}.<br>
		Здесь &ndash; насыщенность, начертание, размер, шрифт + семейство.
	</p>
	
	<p class="font_3">
		font_3{font: normal small-caps 1em/1.2em verdana;}<br>
		Значение normal будет применено сразу к насыщенности<br>
		и начертанию, т.к. оно присутствует у обоих свойств.
	</p>
	
</body>
</html>

Пример №1