font-weight

CSS-властивість font-weight (укр. — “товщина шрифта”) використовується для зміни товщини або жирності шрифта тексту. Вона дозволяє задавати різні рівні жирності шрифта, щоб зробити текст більш виразним або акцентувати певні частини контенту, наприклад, для заголовків або важливих елементів.

Інтерактивний приклад використання

Випускники GoIT працюють у 2100+ ІТ-компаній України, Європи та США

Синтаксис

font-weight: normal | bold | <number> | bolder | lighter;

Значення

  • normal — стандартна товщина шрифта (зазвичай значення 400). Це значення використовується для більшості шрифтів.
  • bold — робить шрифт жирним (товщина зазвичай 700).
  • <number> — числове значення від 100 до 900, яке визначає товщину шрифта. Чим більше число, тим товстіший шрифт:
    • 100 — найменша товщина шрифта.
    • 400 — нормальна товщина шрифта.
    • 700 — стандартний жирний шрифт.
    • 900 — найбільша товщина шрифта.
  • bolder — збільшує товщину шрифта на один рівень відносно батьківського елемента.
  • lighter — зменшує товщину шрифта на один рівень відносно батьківського елемента.

Крім цих основних значень, у будь-якої CSS-властивості є службові значення:

  • inherit — наслідує значення від батьківського елемента;
  • initial — скидає до значення за замовчуванням;
  • unset — поводиться як inherit для властивостей, що наслідуються, і як initial для ненаслідуваних;
  • revert — скасовує стилі автора і повертає значення з таблиці стилів браузера чи користувача;
  • revert-layer — повертає значення з попереднього шару каскаду (@layer).

Додаткові моменти

  • Властивість font-weight працює лише з шрифтами, які підтримують різні товщини. Якщо шрифт не має підтримки різних товщин, властивість буде ігноруватися, і текст буде відображатися з товщиною за замовчуванням.
  • Зазвичай значення normal відповідає товщині 400, а bold — товщині 700, але це може змінюватися залежно від шрифта.
  • Числові значення font-weight дозволяють більш точно контролювати товщину шрифта, що корисно при використанні спеціальних шрифтів або для створення стилізованих текстових ефектів.
  • Якщо шрифт підтримує лише певні товщини (наприклад, тільки 400 і 700), використання числових значень між ними може не дати бажаного результату.
  • Властивість font-weight часто комбінується з іншими властивостями, такими як font-family та font-size, для досягнення кращого візуального ефекту.
  • Властивість підтримується всіма сучасними браузерами.