font-weight

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

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

Синтаксис

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

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

/* Числові значення - ключові слова */
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: inherit;
font-weight: initial;
font-weight: revert;
font-weight: revert-layer;
font-weight: unset;

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

Значення

normal

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

bold

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

lighter

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

bolder

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

<number>

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

В раніших версіях специфікації font-weight ця властивість приймала лише ключові слова й числові значення 100, 200, 300, 400, 500, 600, 700, 800 та 900; незмінні шрифти насправді можуть користуватися лише значеннями з цього набору, натомість дрібні значення (наприклад, 451) перекладаються для незмінних шрифтів у одне з цих значень за допомогою системи Запасних ваг.

Рівень 4 Специфікації шрифтів CSS розширює синтаксис для приймання будь-якого числа від 1 до 1000 і запроваджує Змінні шрифти, котрі можуть застосовувати будь-яке з набагато дрібніших значень ваги шрифту.

Запасні ваги

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

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

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

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

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

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

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

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

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

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

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

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

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

Примітка: Щоб приклад нижче працював, потрібен браузер, котрий підтримує синтаксис CSS шрифтів рівня 4, в котрому font-weight може бути будь-яким числом між 1 і 1000. Демо завантажується з font-weight: 500;. Змінюйте це значення, аби побачити, як зміниться вага тексту.

Занепокоєння щодо доступності

Люди з проблемами зору можуть мати складнощі при читанні тексту, чиє значення 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;
}

Результат

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

              <br />
              <small>
                  # font-weight-prop
                </small>
            </a>
          </td>
        </tr>
      </tbody>
    </table>