html.okpython.net
HTML и CSS для начинающих

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).

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

Ссылки

Примеры

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