css властивість font-weight
Властивість font-weight встановлює товщину шрифта.
Вага шрифтів, доступних вам, залежить від сімейства шрифтів, який ви використовуєте. Деякі шрифти мають обличчя символів лише для нормальної (normal) та жирної (bold) товщини. Для таких шрифтів жирність 100-500 є normal, а 600-900 - bold.
Коли вказано значення, для якого не існує обличчя (спеціальних гліфів саме такою товщини) у шрифті, використовується найбільш подібні обличчя.
Якщо в якості значення вказано bolder або lighter, наступна таблиця показує, як визначається жирність тексту:
| Значення | bolder | lighter |
|---|---|---|
| 100 | 400 | 100 |
| 200 | 400 | 100 |
| 300 | 400 | 100 |
| 400 | 700 | 100 |
| 500 | 700 | 100 |
| 600 | 900 | 400 |
| 700 | 900 | 400 |
| 800 | 900 | 700 |
| 900 | 900 | 700 |
Значення розміру шрифту інтерполюється за допомогою кроків у 100. Інтерполяція відбувається у реальному числовому просторі і перетворюється на ціле число, округлюючи до найближчого кратного значення 100.
| Нотатка: | Не всі шрифти підтримують числові значення. Якщо шрифт не підтримує значення - браузер самостійно визначить найбільш близьке значення і відобразить з ним шрифт. |
Синтаксис
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900Властивість font-weight може отримувати 15 значень:
initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивості від свого батьківського елемента.
100Найбільш тонкий.
200Супер тонкий текст.
300Тонкий
400Нормальний.
500Середній.
600Напівжирний.
700Жирний.
800Супер жирний.
900Найбільш жирний.
normalНормальний шрифт. Значення без задання
boldЖирні символи.
bolderСимволи товстіші за батьківські.
lighterСимволи тонкіші за батьківські.
| Значення без задання: | normal |
|---|---|
| Наслідує: | Так |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.fontWeight="bold" |
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
| font-weight | 2.0 |
3.0 |
1.0 |
1.3 |
3.5 |
| Переглядач | |||
|---|---|---|---|
| font-weight | 1.0 |
1.0 |
3.1 |
Мобільних переглядачів ще не додано.
Приклади
Значення у дії
Приклад використання
Різна товщина шрифту для трьох параграфів.
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}