CSS font-weight — жирність шрифту: від 100 до 900

Властивість font-weight встановлює товщину шрифта.

Вага шрифтів, доступних вам, залежить від сімейства шрифтів, який ви використовуєте. Деякі шрифти мають обличчя символів лише для нормальної (normal) та жирної (bold) товщини. Для таких шрифтів жирність 100-500 є normal, а 600-900 - bold.

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

Якщо в якості значення вказано bolder або lighter, наступна таблиця показує, як визначається жирність тексту:

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

правити

Загальний опис

правити

Нотатка

Не всі шрифти підтримують числові значення. Якщо шрифт не підтримує значення - браузер самостійно визначить найбільш близьке значення і відобразить з ним шрифт.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Властивість font-weight може отримувати 15 значень:

normal

Нормальний шрифт. Значення без задання

автор: Svitlana

правити

bold

Жирні символи.

автор: Svitlana

правити

bolder

Символи товстіші за батьківські.

автор: Svitlana

правити

lighter

Символи тонкіші за батьківські.

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента.

автор: Svitlana

правити

100

Найбільш тонкий.

автор: Svitlana

правити

200

Супер тонкий текст.

автор: Svitlana

правити

300

Тонкий

автор: Svitlana

правити

400

Нормальний.

автор: Svitlana

правити

500

Середній.

автор: Svitlana

правити

600

Напівжирний.

автор: Svitlana

правити

700

Жирний.

автор: Svitlana

правити

800

Супер жирний.

автор: Svitlana

правити

900

Найбільш жирний.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	2	1	1	3.5	12	3

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<p class="normal">normal — звичайний</p>
<p class="thick">bold — жирний</p>
<p class="thicker">900 — найжирніший</p>

p.normal {
    font-weight: normal;
}

p.thick {
    font-weight: bold;
}

p.thicker {
    font-weight: 900;
}

<figure>
    <h3>Доставка <strong>лише по місту</strong> до 18:00</h3>
    <figcaption>заголовок 700 + strong</figcaption>
</figure>

<figure>
    <h3 class="light">Доставка <strong>лише по місту</strong> до 18:00</h3>
    <figcaption>заголовок 400 + strong</figcaption>
</figure>

figure {
    display: inline-block;
    width: 240px;
    margin: 0 24px 0 0;
    vertical-align: top;
}

figcaption {
    margin-top: 6px;
    font: 12px monospace;
    text-align: center;
}

h3 {
    margin: 0;
    padding: 8px;
    border: 1px solid #99aaaa;
    font: 700 18px/1.4 Georgia, serif;
}

.light {
    font-weight: 400;
}

strong {
    font-weight: 700;
}

<p>Цей приклад показує як працює властивість <code>font-weight</code>. Спробуйте вимкнути/ввімкнути перемикач, щоб змінити відображення цифр нижче. Зверніть увагу, що властивість може не підтримуватися Вашим браузером.</p>

<div class="inputs">
  <input id="normal" checked name="font-weight" type="radio"/>
  <label for="normal">normal</label>
  <message for="normal">Нормальний шрифт. Значення без задання.</message>
  
  <input id="bold" name="font-weight" type="radio"/>
  <label for="bold">bold</label>
  <message for="bold">Жирні символи.</message>
  
   <input id="100" name="font-weight" type="radio"/>
  <label for="100">100</label>
  <message for="100">Найбільш тонкий.</message>
  
  <input id="200" name="font-weight" type="radio"/>
  <label for="200">200</label>
  <message for="200">Супер тонкий текст.</message>
  
  <input id="300" name="font-weight" type="radio"/>
  <label for="300">300</label>
  <message for="300">Тонкий</message>
  
  <input id="400" name="font-weight" type="radio"/>
  <label for="400">400</label>
  <message for="400">Нормальний.</message>
  
  <input id="500" name="font-weight" type="radio"/>
  <label for="500">500</label>
  <message for="500">Середній.</message>
  
  <input id="600" name="font-weight" type="radio"/>
  <label for="600">600</label>
  <message for="600">Напівжирний.</message>
  
  <input id="700" name="font-weight" type="radio"/>
  <label for="700">700</label>
  <message for="700">Жирний.</message>
  
  <input id="800" name="font-weight" type="radio"/>
  <label for="800">800</label>
  <message for="800">Супер жирний.</message>
  
  <input id="900" name="font-weight" type="radio"/>
  <label for="900">900</label>
  <message for="900">Найбільш жирний.</message>
</div>

<p id="message">Нормальний шрифт. Значення без задання.</p>

<hr>

<p id="block">Це текст</p>

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: 'Helvetica';
}

#block {
  font-size: 7em; 
  text-align: center;
  font-family: system-ui, sans-serif;
}

message {
  display: none;
}

const message = document.querySelector('#message');

document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {

  var messageText = document.querySelector("message[for='" + this.id + "']");
  message.textContent = messageText?.textContent ?? '';

  document.querySelectorAll('#block').forEach((n) => n.style.setProperty('font-weight', this.id));

}));

<p class="about">За допомогою властивості <strong>font-weight</strong> ми можемо встановлювати жирність тексту.</p>

<p>Цей абзац використовує значення властивості <strong>font-weight</strong> за замовчуванням (<em>normal</em> або <em>400</em>).</p>

<p class="thin">А тут ми встановили значення <em>300</em>, що робить текст більш тонким.</p>

<p class="bold">А тут ми встановили значення <em>bold</em>, що робить текст більш жирним.</p>

<p class="notice">Деякі шрифти можуть не мати більш тонкого або жирнішого варіанту!</p>

body {
  line-height: 1.45;
  font-size: 17px;
  font-family: sans-serif;
}

.about {
  background-color: gold;
  padding: 12px;
}

.notice {
  color: #666;
  border-left: 2px solid #808080;
  padding-left: 8px;
  margin: 20px 0 36px 0;
}

.thin {
  font-weight: 300;
}

.bold {
  font-weight: bold;
}