css властивість font-weight


Властивість 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;
}

Додаткові посилання

Всі Коментарі (0)

Зареєструйся на сайті, аби мати змогу залишати коментарі. Зареєструватися  чи
Немає Коментарів