The вага шрифту властивість у CSS використовується для встановлення щільності або товщини шрифту. Він визначає, наскільки тонкими чи товстими є символи в тексті. The вага шрифту властивість залежить або від ваги, визначеної браузером, або від доступних шрифтів у сімействі шрифтів. Ця властивість CSS визначає символи від тонких до товстих.

Він приймає попередньо визначені числові значення або значення ключових слів. Доступні ключові слова, які ми можемо використовувати з цією властивістю нормальний, жирний, світліший і жирніший . Числове значення може бути 100, 200, 300, ........., до 900. Більше числове значення означає більш жирний шрифт, ніж менші числові значення.

Синтаксис

 font-weight: normal | bold | bolder | lighter | number | initial | inherit;  

The номер у наведеному вище синтаксисі представляє числові значення. Числове значення 400 таке ж, як значення ключового слова нормально , і значення 700 таке ж, як значення ключового слова жирний .

The нормально значення strong> визначає звичайні символи та жирний значення визначає товсті символи. The сміливіше значення являє собою більш жирний font-weight, а легше value представляє меншу вагу шрифту, ніж вага, успадкована від батьківського.

Давайте подивимося, як виділити жирним текст у CSS за допомогою ілюстрації.

вступ

CSS відомий як потужний інструмент для розробки веб-сторінки. За допомогою цього ми можемо стилізувати вміст HTML багатьма способами. Одним із найпоширеніших властивостей стилізації веб-сторінки є використання властивості font-weight. За допомогою жирного тексту ми можемо підкреслити ключову інформацію та візуальний контраст, а також це покращує читабельність контенту.

Розуміння властивості Font-Weight

У CSS є властивість Font-Weight, яка використовується для визначення щільності або товщини шрифту. Він також визначає ступінь напівжирності або легкості тексту, при цьому приймається вище значення, яке вказує на більш жирний шрифт. Властивість font-weight приймає різні значення, наприклад числові та ключові значення.

Діапазон числових значень лежить між 100 і 900 із кроком 100. Наприклад, якщо ми приймемо значення щільності шрифту рівним 400, то це нормально, тоді як значення щільності шрифту 700 вважається жирним. Жирний, жирніший, світліший і Деякі загальновживані значення ключових слів.

Як створити жирний текст за допомогою CSS

Ми можемо створити жирний текст у HTML за допомогою CSS. Ми можемо використовувати вбудовані, внутрішні або зовнішні властивості стилю шрифту.

1. Як ми можемо створити жирний текст за допомогою вбудованого стилю

За допомогою вбудованого стилю ми можемо використовувати властивість font-weight безпосередньо до конкретного елемента HTML. Візьмемо приклад.

код HTML:

 Document <p>Welcome to javaTpoint</p> <p>This is a bold text</p>  

Вихід

Пояснення:

У наведеному вище коді ми використали вбудований CSS і застосували властивість font-weight як жирний шрифт.

2. Як ми можемо створити жирний текст із внутрішнім стилем

Тут ми повинні записати властивість CSS у тег head з тегом style. Візьмемо приклад:

код HTML:

 Document p { font-weight: bold; } <p>Welcome to javaTpoint</p> <p>This is a bold text</p>  

Вихід

Пояснення:

У наведеному вище коді ми використали внутрішній CSS і застосували властивість font-weight.

3. Як ми можемо створити жирний текст із зовнішнім стилем

Тут ми повинні створити зовнішній файл CSS і пов’язати його з файлом HTML. У цьому файлі CSS ми повинні записати властивість style. Візьмемо приклад.

код HTML:

 Document <p>Welcome to javaTpoint</p> <p>This is a bold text</p>  

код CSS:

 p { font-weight: bold; }  

Вихід

Пояснення:

У наведеному вище коді ми використали зовнішню властивість CSS і реалізували властивість font-weight.

приклад

Давайте подивимося, як створити жирний текст різних відтінків за допомогою прикладу нижче:

 p{ font-size: 20px; } <p>This font is normal.</p> <p>This font is bold.</p> <p>This font is lighter.</p> <p>This font is bolder.</p> <p>This font is 100 weight.</p> <p>This font is 200 weight.</p> <p>This font is 300 weight.</p> <p>This font is 400 weight.</p> <p>This font is 500 weight.</p> <p>This font is 600 weight.</p> <p>This font is 700 weight.</p> <p>This font is 800 weight.</p> <p>This font is 900 weight.</p>  

Вихід