Свойство CSS font-weight
Свойство font-weight используется для установки жирности шрифта. Некоторые шрифты поддерживают только нормальную и жирную начертания.
| Начальное значение | normal |
|---|---|
| Применяется к | Ко всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Да. |
| Анимируется | Да. |
| Версия | CSS1 |
| Синтаксис DOM | object.style.fontWeight = "bolder"; |
Синтаксис
Синтаксис свойства CSS font-weight
css
font-weight: normal | bold | bolder | lighter | number | initial | inherit;Пример свойства font-weight:
Пример свойства CSS font-weight со значением bolder
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.bolder {
font-weight: bolder;
}
</style>
</head>
<body>
<h2>Font-weight property example</h2>
<p class="bolder">We used a bolder text here.</p>
</body>
</html>Результат
Пример свойства font-weight со всеми значениями:
Пример свойства CSS font-weight со значениями normal, lighter, bold, bolder и числовым значением
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.normal {
font-weight: normal;
}
p.lighter {
font-weight: lighter;
}
p.bold {
font-weight: bold;
}
p.bolder {
font-weight: bolder;
}
p.fweight {
font-weight: 600;
}
</style>
</head>
<body>
<h2>Font-weight property example</h2>
<p class="normal">We used normal weight here.</p>
<p class="lighter">This is a lighter weight.</p>
<p class="bold">We used bold weight here.</p>
<p class="bolder">We used a bolder text here.</p>
<p class="fweight">We set font-weight 600 here.</p>
</body>
</html>Значения
| Значение | Описание | Запустить |
|---|---|---|
| normal | Устанавливает нормальную жирность. Это значение по умолчанию. | Запустить » |
| bold | Устанавливает жирное начертание (эквивалентно 700). | Запустить » |
| bolder | Устанавливает жирность на один уровень тяжелее вычисленного значения родительского элемента. | Запустить » |
| lighter | Устанавливает жирность на один уровень легче вычисленного значения родительского элемента. | Запустить » |
| 100 200 300 400 500 600 700 800 900 | Устанавливает числовую жирность от тонкой (100) до жирной (900). 400 эквивалентно normal, а 700 эквивалентно bold. | Запустить » |
| initial | Устанавливает свойству его значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Практика
Какие характеристики задает свойство CSS 'font-weight'?