font-weight¶
Свойство font-weight
устанавливает насыщенность шрифта.
Значение указывается в виде чисел от 100
до 900
с шагом 100
или с помощью заданных ключевых слов.
Шрифт и Цвет
- font
- font-family
- font-feature-settings
- font-kerning
- font-language-override
- font-optical-sizing
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-synthesis
- font-variant
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
- font-variant-ligatures
- font-variant-numeric
- font-variant-position
- font-variation-settings
- font-weight
- line-height
Синтаксис¶
/* Keyword values */
font-weight: normal;
font-weight: bold;
/* Keyword values relative to the parent */
font-weight: lighter;
font-weight: bolder;
/* Numeric keyword values */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
/* Global values */
font-weight: inherit;
font-weight: initial;
font-weight: unset;
Значения¶
Насыщенность шрифта задаётся с помощью ключевых слов: bold
— жирное начертание и normal
— нормальное начертание. Также допустимо использовать условные единицы от 100
до 900
. Значения bolder
и lighter
изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону.
Вот как числовые значения влияют на насыщенность шрифта.
100
— тонкое начертание;200
— сверхсветлое;300
— светлое;400
— нормальное (аналогичноnormal
);500
— среднее;600
— полужирное;700
— жирное (аналогичноbold
);800
— сверхжирное;900
— тяжёлое.
Учтите, что не все шрифты поддерживают этот набор. Если указанное значение не поддерживается, то браузер приведёт шрифт к ближайшей насыщенности. К примеру, если вы указали 900
и оно не может быть показано, то браузер в действительности применит значение 700
как ближайшее, которое работает корректно.
Значение по-умолчанию:
font-weight: normal;
Спецификации¶
Описание и примеры¶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>font-weight</title>
<style>
h1 {
font-weight: normal; /* Нормальное начертание */
}
.select {
color: maroon; /* Цвет текста */
font-weight: 600; /* Полужирное начертание */
}
</style>
</head>
<body>
<h1>Мелодический голос персонажа</h1>
<p>
<span class="select">Поток сознания</span>,
соприкоснувшись в чем-то со своим главным антагонистом
в постструктурной поэтике, иллюстрирует былинный
мифопоэтический хронотоп, об этом свидетельствуют
краткость и завершенность формы, бессюжетность,
своеобразие тематического развертывания.
</p>
</body>
</html>