html.okpython.net
Основы создания сайтов
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