font-weight

Властивість CSS font-weight (вага шрифту) задає вагу (чи грубину) шрифту. Доступні ваги залежать від конкретної заданої font-family.

Спробуйте його в дії

Синтаксис

/* Значення – ключові слова <font-weight-absolute> */
font-weight: normal;
font-weight: bold;

/* Числові значення <font-weight-absolute> [1,1000] */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400; /* normal */
font-weight: 500;
font-weight: 600;
font-weight: 700; /* bold */
font-weight: 800;
font-weight: 900;

/* Значення – ключові слова, що є відносними щодо батьківського елемента */
font-weight: lighter;
font-weight: bolder;

/* Глобальні значення */
font-weight: inherit;
font-weight: initial;
font-weight: revert;
font-weight: revert-layer;
font-weight: unset;

Властивість font-weight задається за допомогою або значення <font-weight-absolute>, або відносного значення ваги, як перелічено нижче.

Значення

normal

Звичайна вага шрифту. Те саме, що 400.

bold

Груба вага шрифту. Те саме, що 700.

<number>

Значення <number> від 1 до 1000 включно. Більші числа представляють ваги, грубіші (або так само грубі) за менші числа. Завдяки цьому можливий детальний контроль змінних шрифтів. У випадку незмінних шрифтів, якщо задана конкретна вага недоступна, використовується алгоритм запасної ваги: числові значення, що діляться на 100, відповідають загальноприйнятим назвам ваг, як описано в розділі Загальноприйняте відображення імен ваг нижче.

lighter

На одну відносну вагу шрифту легше, ніж батьківський елемент. Зверніть увагу, що для відносного обчислення ваги рахуються лише чотири ваги шрифту; дивіться розділ Значення відносних ваг нижче.

bolder

На одну відносну вагу шрифту важче, ніж батьківський елемент. Зверніть увагу, що для відносного обчислення ваги рахуються лише чотири ваги шрифту; дивіться розділ Значення відносних ваг нижче.

Запасні ваги

Якщо конкретна задана вага – недоступна, то для визначення фактично відтвореної ваги застосовується наступне правило:

• Якщо цільова задана вага – від 400 до 500 включно:

  • Шукати доступні ваги між цільовою і 500, у порядку зростання.
  • Якщо збігу не знайдено, шукати доступні ваги, менші за цільову, в порядку спадання.
  • Якщо збігу не знайдено, шукати доступні ваги, більші за 500, у порядку зростання.

• Якщо задана вага, менша за 400 шукати доступні ваги, менші за цільову, в порядку спадання. Якщо збігу не знайдено, шукати доступні ваги, більші за цільову, в порядку зростання.

• Якщо задана вага, більша за 500, шукати доступні ваги, більші за цільову, в порядку зростання. Якщо збігу не знайдено, шукати доступні ваги, менші за цільову, в порядку спадання.

[!NOTE] Алгоритм запасних ваг використовується лише для візуалізації. Обчисленим (computed) значенням властивості все одно є задане значення.

Значення відносних ваг

Коли вказано lighter чи bolder, діаграма нижче демонструє, як визначається абсолютна вага шрифту елемента.

Зверніть увагу, що при застосуванні відносних ваг рахуються лише чотири ваги – тонка (100), звичайна (400), груба (700) і тяжка (900). Якщо сімейство шрифту має більше доступних ваг, то для потреб відносного обчислення ваг вони ігноруються

Загальноприйняте відображення імен ваг

Числові значення від 100 до 900 приблизно відповідають наступним загальноприйнятим іменам ваг (дивіться Специфікацію OpenType):

Змінні шрифти

Хоч більшість шрифтів має конкретну вагу, що відповідає кожному з чисел у Загальноприйнятому відображенні імен ваг, чимало змінних шрифтів підтримують певний діапазон ваг, що надає дизайнерам та розробникам набагато детальніший контроль над обраною вагою.

У змінних шрифтах TrueType та OpenType для реалізації змінної ширини застосовується варіація "wght".

Це демо завантажується з заданим font-weight: 500;. Змініть значення властивості font-weight у селекторі .sample, аби побачити, як зміниться вага тексту (наприклад, поставте 200, 700). Клацніть "Грати" у блоках коду нижче, щоб редагувати приклад на Ігровому майданчику MDN:

<p class="sample">
  ...зустріти дванадцятиметрового мегалозавра, що шкандибає Лисою горою, неначе
  слоноподібна ящірка, було б не дуже весело.
</p>

@font-face {
  src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/MutatorSans.ttf");
  font-family: "MutatorSans";
  font-style: normal;
  font-weight: 1 1000;
}

.sample {
  text-transform: uppercase;
  font-weight: 500;
  font:
    1.5rem "MutatorSans",
    sans-serif;
}

Доступність

Люди з проблемами зору можуть мати складнощі при читанні тексту, чиє значення font-weight – 100 (тонкий, волосинний шрифт) чи 200 (украй легкий), особливо коли шрифт має низьке співвідношення контрасту кольорів.

• MDN розуміння WCAG, пояснення Настанов 1.4
• Розуміння критерію успіху 1.4.8 | W3C розуміння WCAG 2.0

Формальне визначення

Формальний синтаксис

<font-weight-absolute> | bolder | lighter
де 
<font-weight-absolute> = normal | bold | <number [1,1000]>

Приклади

Задання ваг шрифтів

HTML

<p>
  Одного погожого дня прийшла Оленка до бабусі. Камінцем кинула в курочку,
  собачці Жучці показала язика і зайшла до хатинки. А бабуся в цей час спекла
  хліб. На столі поклала. Пахучий, теплий ще. Із шкоринкою золотавою. Пригостила
  бабуся онуку окрайцем хліба. Дівчинка взяла і побігла на подвір'я гуляти.
</p>

<div>
  Я тяжкий<br />
  <span>Я легший</span>
</div>

CSS

/* Зробити текст абзацу грубим. */
p {
  font-weight: bold;
}

/* Зробити текст div на дві позначки важчим за
   звичайний, але легшим за стандартний грубий. */
div {
  font-weight: 600;
}

/* Зробити текст span на одну позначку легшим
   за свого предка. */
span {
  font-weight: lighter;
}

Результат

Специфікації

Сумісність із браузерами

Дивіться також

• font-family
• font-style
• Атрибут SVG font-weight
• Навчання – Основи оформлення тексту й шрифту
• Модуль Шрифтів CSS