Тексти веб-сторінок можуть мати різну вагу, що визначає їхню товщину. Серед різних значень ваги, найпоширенішим є жирний шрифт. У CSS, який є каскадною мовою стилів для опису зовнішнього вигляду веб-сторінок, є властивість, яка дозволяє зробити текст жирним.
Властивість font-weight
Властивість font-weight в CSS контролює товщину тексту. Вона приймає числові значення від 100 до 900, де 100 – найтонший, а 900 – найжирніший. Крім того, є кілька зарезервованих ключових слів, які можна використовувати замість числових значень:
- normal – нормальна вага, яка зазвичай становить 400.
- bold – жирний шрифт, який відповідає значенню 700.
- bolder – на один рівень жирніший за поточне значення.
- lighter – на один рівень тонший за поточне значення.
Синтаксис
Синтаксис для використання властивості font-weight:
font-weight: значение;
Значенням може бути числове значення, ключове слово або комбінація того й іншого. Наприклад:
font-weight: bold;font-weight: 600;font-weight: bolder;
Застосування
Властивість font-weight можна застосувати до будь-якого елемента, який має текст, наприклад:
p { font-weight: bold;}h2 { font-weight: 900;}
У наведених вище прикладах абзаци (тег
) відображатимуться жирним шрифтом, а рівня 1 (тег
) – дуже жирним шрифтом.
Сумісність
Властивість font-weight підтримується всіма сучасними веб-браузерами.
Властивість font-weight в CSS є простим, але ефективним способом регулювання товщини тексту. Вона дозволяє веб-дизайнерам створювати візуально привабливі та читабельні веб-сторінки. Знаючи, як користуватися цією властивістю, можна легко покращити естетичний вигляд будь-якого веб-сайту.
Властивість CSS для виділення тексту жирним
У каскадних таблицях стилів (CSS) властивість для виділення тексту жирним шрифтом називається font-weight. Вона вказує на товщину шрифту, що відображається, і може приймати різні значення, щоб контролювати рівень жирності тексту.
Значення властивості font-weight можуть бути як числові, так і іменовані. Числові значення представляють абсолютну товщину шрифту на шкалі від 100 до 900 з ом 100. Іменовані значення представляють відносну товщину шрифту на основі наперед визначених категорій.
Числові значення:
- 100 – Thin: Найтонша товщина шрифту.
- 200 – Extra-Light: Трохи товстіше за Thin.
- 300 – Light: Тонкий, але більш помітний, ніж Extra-Light.
- 400 – Normal: Стандартна товщина шрифту, зазвичай використовується в основному тексті.
- 500 – Medium: Трохи товстіше, ніж Normal, але тонше за Semi-Bold.
- 600 – Semi-Bold: Середній рівень жирності, більш помітний, ніж Medium.
- 700 – Bold: Жирний шрифт, часто використовується для заголовків та виділення важливої інформації.
- 800 – Extra-Bold: Дуже жирний шрифт, призначений для привернення максимальної уваги.
- 900 – Black: Найбільш жирна товщина шрифту, що доступна.
Іменовані значення:
- normal: Еквівалент числового значення 400 (Normal).
- bold: Еквівалент числового значення 700 (Bold).
- lighter: Задає товщину шрифту на одну ступінь тонше, ніж поточне значення.
- bolder: Задає товщину шрифту на одну ступінь жирніше, ніж поточне значення.
- inherit: Успадковує товщину шрифту від батьківського елемента.
Приклад: Щоб зробити текст жирним, ви можете використовувати наступний код CSS:
p { font-weight: bold;}Це зробить усі абзаци на веб-сторінці жирними (використовуючи числове значення 700). Ви також можете використовувати іменоване значення "bold", як показано нижче:
p { font-weight: bold;}Попередження:
Деякі шрифти можуть не підтримувати всі рівні жирності. Якщо ви використовуєте шрифт, який не підтримує певну товщину, браузер відобразить найближче підтримуване значення.
Сумісність:
Властивість font-weight підтримується всіма сучасними браузерами, включаючи Chrome, Firefox, Safari, Edge та Opera.
Думки експертів
Автор: Марк Сміт, сертифікований розробник CSS
У CSS властивість, яка робить текст жирним, — це font-weight. Вона визначає товщину шрифту тексту, і значення "bold" робить текст жирним.
Як використовувати властивість font-weight:
Щоб зробити текст жирним, ви можете встановити властивість font-weight на "bold", використовуючи синтаксис:
font-weight: bold;Ви можете встановити це значення для будь-якого елемента, який містить текст, наприклад:
h2 { font-weight: bold;}Це зробить весь текст тега
жирним.
Додаткові значення font-weight:
Крім "bold", існують й інші значення властивості font-weight, які дозволяють контролювати товщину шрифту:
- normal: Нормальна товщина шрифту
- lighter: Більш тонка, ніж звичайна товщина шрифту
- bold: Жирний шрифт
- bolder: Ще більш жирний шрифт
- 100-900: Числові значення від 100 (найтонший) до 900 (найжирніший)
Використовуючи ці значення, ви можете точно налаштувати товщину шрифту вашого тексту для досягнення бажаного ефекту.
Відповіді на питання
Запитання 1:
Яка властивість CSS використовується для напівжирного тексту?
Відповідь:
font-weight
Запитання 2:
Які значення властивості font-weight роблять текст жирним?
Відповідь:
bold- Число від
500до900(наприклад,font-weight: 700;)
Запитання 3:
Що означає значення font-weight: normal?
Відповідь:
Значення normal вказує на звичайну вагу шрифту, що зазвичай відповідає вазі 400.
Запитання 4:
Як встановити точний рівень жирності тексту?
Відповідь:
Використовуйте числові значення від 100 до 900, де 100 є найсвітлішим, а 900 – найжирнішим. Наприклад, font-weight: 650; встановить напівжирність вище звичайної, але нижче повної жирності.
Запитання 5:
Чи можна використовувати властивість font-weight для стилізації тексту з нестандартними шрифтами?
Відповідь:
Так, властивість font-weight працює з будь-яким шрифтом, незалежно від його типу чи походження. Це дозволяє контролювати вагу шрифту незалежно від використовуваного шрифтового сімейства.