CSS свойство font-weight

Определение и применение

CSS свойство font-weight устанавливает насколько жирным будет выглядеть текст в элементе.

Числовое значение допускается в диапазоне от 1 до 1000, в том числе дробное. Доступные начертания зависят от шрифта; произвольные значения особенно полезны для вариативных шрифтов. normal соответствует 400, bold — 700.

Попробуйте значения font-weight

Насыщенность шрифта меняет толщину штрихов. Доступные начертания зависят от выбранного шрифта.

Значение свойства

font-weight: 400

HTML и CSS примера
HTML
<div class="demo-target">
  Изучаем CSS: оформление текста помогает читать и понимать страницу.
</div>
CSS
.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 300px;
  padding: 16px;
  border: 2px solid #245a85;
  background: #fff3d6;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  font-weight: 400;
}

Поддержка браузерами

Спецификация: CSS fonts

Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры
Совместимостьcss.properties.font-weight
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
font-weight✓2✓12✓1✓3.5✓1✓18✓4✓10.1✓1✓1.0✓4.4✓1
bold✓2✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
bolder✓2✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
lighter✓2✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
normal✓2✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
number✓62✓17✓61✓49✓11✓62✓61✓46✓11✓8.0✓62✓11

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS
font-weight: <font-weight-absolute> | bolder | lighter;

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

| — выбор варианта.

JavaScript синтаксис:

JavaScript
element.style.fontWeight = "normal";

Начальное значение свойства

normal.

Значения свойства

Значения font-weight
Значение Описание
normal Определяет нормальное начертание символов. Начальное значение.
bold Определяет жирное начертание символов.
bolder Увеличивает унаследованное значение font-weight до следующего возможного для данного шрифта значения.
lighter Уменьшает унаследованное значение font-weight до следующего возможного для данного шрифта значения.
100
200
300
400
500
600
700
800
900 		Определяет толщину шрифта в тексте исходя из указанного значения.
400 - соответствует значению normal.
700 - соответствует значению bold.
число от 1 до 1000 Произвольная толщина, например 550. Промежуточные значения отображаются, только если шрифт их поддерживает (например, вариативный шрифт).
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для наследуемого свойства font-weight наследует вычисленное значение у родительского элемента.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Спецификация

CSS Fonts — спецификация font-weight.

Наследуется

Да.

Анимируемое

Да, по вычисленному значению: совместимые числовые значения интерполируются плавно. Переход между несовместимыми типами или ключевыми словами может быть дискретным.

Примеры, попробуйте сами

Насыщенность шрифта

Измените 700 на 400 или 900. Доступные начертания зависят от выбранного шрифта.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Насыщенность шрифта</title>
  </head>
  <body>
    <section>
      <h3>Вариант A</h3>
      <div class="sample first">
        Учебный текст помогает увидеть изменение свойства. Сравните строки, расстояния и положение содержимого. Учебный
        текст помогает увидеть изменение свойства. Сравните строки, расстояния и положение содержимого.
      </div>
    </section>
    <section>
      <h3>Вариант B</h3>
      <div class="sample second">
        Учебный текст помогает увидеть изменение свойства. Сравните строки, расстояния и положение содержимого. Учебный
        текст помогает увидеть изменение свойства. Сравните строки, расстояния и положение содержимого.
      </div>
    </section>
  </body>
</html>
style.css
CSS
.first {
    font-weight: 400;
}
.second {
    font-weight: 700;
}