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

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

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

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

Синтаксис

font-weight: bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Значения

normal – нормальное начертание шрифта.
bold – жирное начертание шрифта.
bolder – браузер установит жирность большую, чем у родительского элемента.
lighter – браузер установит жирность меньшую, чем у родительского элемента.
100, 200, ..., 900 – жирность в условных единицах от 100 до 900, где 400 соответствует нормальному начертанию шрифта (т.е. normal), а 600 – жирному (т.е. bold).

На данный момент значения 100 – 500 свойства font-weight соответствуют нормальному начертанию шрифта, а 600 – 900, соответственно, жирному начертанию. В дальнейшем возможно станут доступны и остальные числовые значения.

Ссылки

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

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

Примеры

HTML Результат

htmlCodes

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

	<style>
	
		p{
		width: 400px;
		margin: 2em;
		}
	
		.weight_1{font-weight: normal;}
		.weight_2{font-weight: bold;}
		.weight_3{font-weight: bolder;}
		.weight_4{font-weight: lighter;}
		.weight_5{font-weight: 600;}
		
	</style>
	
</head>
<body>

	<p class="weight_1">
		normal соответствует значению 400,
		значения 100, 200, 300 не будут работать.
	</p>
	
	<p class="weight_2">
		bold соответствует значению 600. 
	</p>
	
	<p class="weight_3">
		У родительского элемента, т.е. у тела документа,
		по умолчанию браузер использует жирность normal,
		поэтому значение bolder повышает ее до bold.
	</p>
	
	<p class="weight_4">
		 lighter не сработает, т.к. браузеры на данный 
		 момент поддерживают только значения 400 и 600.
	</p>
	
	<p class="weight_5">
		600 соответствует bold.
	</p>
	
</body>
</html>

Пример №1