CSS font-weight — жирність шрифту: від 100 до 900
Властивість 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.
автор: Svitlana
- Нотатка
-
Не всі шрифти підтримують числові значення. Якщо шрифт не підтримує значення - браузер самостійно визначить найбільш близьке значення і відобразить з ним шрифт.
автор: Svitlana
Синтаксис
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900Властивість font-weight може отримувати 15 значень:
-
normal -
Нормальний шрифт. Значення без задання
автор: Svitlana -
bold -
Жирні символи.
автор: Svitlana -
bolder -
Символи товстіші за батьківські.
автор: Svitlana -
lighter -
Символи тонкіші за батьківські.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента.
автор: Svitlana -
100 -
Найбільш тонкий.
автор: Svitlana -
200 -
Супер тонкий текст.
автор: Svitlana -
300 -
Тонкий
автор: Svitlana -
400 -
Нормальний.
автор: Svitlana -
500 -
Середній.
автор: Svitlana -
600 -
Напівжирний.
автор: Svitlana -
700 -
Жирний.
автор: Svitlana -
800 -
Супер жирний.
автор: Svitlana -
900 -
Найбільш жирний.
автор: Svitlana
| Значення без задання: | normal |
|---|---|
| Наслідує: | Так |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.fontWeight="bold" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 2 | 1 | 1 | 3.5 | 12 | 3 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Три ступені насиченості: звичайний, жирний і максимальний 900 — якщо шрифт має проміжні накреслення, число дає точніший контроль, ніж bold.
HTML
<p class="normal">normal — звичайний</p>
<p class="thick">bold — жирний</p>
<p class="thicker">900 — найжирніший</p>CSS
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}Значення у дії
Приклад використання
Коментарі
Коментарів ще немає — будьте першим!