Пошук уроків, статей та іншого контенту
Змініть насиченість тексту за допомогою font-weight і розберіться зі стандартними та числовими значеннями.
font-weightВластивість CSS font-weight визначає товщину, або насиченість, тексту.
p {
font-weight: bold;
}У результаті текст усередині всіх елементів <p> стане товстішим.
Властивість можна застосовувати до будь-якого текстового елемента:
h1 {
font-weight: 700;
}
.subtitle {
font-weight: 300;
}Найчастіше використовують два ключові слова:
normal — звичайна товщина тексту;
bold — жирний текст.
<p class="normal-text">Звичайний текст</p>
<p class="bold-text">Жирний текст</p>.normal-text {
font-weight: normal;
}
.bold-text {
font-weight: bold;
}Зазвичай браузер інтерпретує:
normal як числове значення 400;
bold як числове значення 700.
Тому ці записи зазвичай дають однаковий результат:
.title {
font-weight: bold;
}
.subtitle {
font-weight: 700;
}Замість ключових слів можна вказати число від 100 до 900 із кроком 100:
.text-regular {
font-weight: 400;
}
.text-medium {
font-weight: 500;
}
.text-bold {
font-weight: 700;
}
.text-extra-bold {
font-weight: 800;
}Чим більше число, тим товщим зазвичай буде текст:
100 — дуже тонкий;
200 — додатково тонкий;
300 — легкий;
400 — звичайний;
500 — середній;
600 — напівжирний;
700 — жирний;
800 — дуже жирний;
900 — надзвичайно жирний.
Проте конкретний результат залежить від шрифту. Якщо шрифт не має окремого накреслення для певної товщини, браузер може вибрати найближчий доступний варіант.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Товщина шрифту</title>
<style>
body {
font-family: Arial, sans-serif;
}
.thin {
font-weight: 300;
}
.regular {
font-weight: 400;
}
.medium {
font-weight: 500;
}
.semibold {
font-weight: 600;
}
.bold {
font-weight: 700;
}
.extra-bold {
font-weight: 800;
}
</style>
</head>
<body>
<p class="thin">Текст із товщиною 300</p>
<p class="regular">Текст із товщиною 400</p>
<p class="medium">Текст із товщиною 500</p>
<p class="semibold">Текст із товщиною 600</p>
<p class="bold">Текст із товщиною 700</p>
<p class="extra-bold">Текст із товщиною 800</p>
</body>
</html>Відкрийте цей файл у браузері та порівняйте товщину рядків. Для шрифту Arial деякі значення можуть виглядати однаково, оскільки цей шрифт не має окремих варіантів для кожної товщини.
font-weight і HTML-елементиДеякі HTML-елементи мають стандартну товщину, задану стилями браузера.
Наприклад:
<strong> зазвичай відображається жирним;
<b> зазвичай відображається жирним;
<h1>–<h6> зазвичай мають більшу товщину, ніж звичайний текст.
Цю товщину можна змінити через CSS:
<strong class="regular">Важливий текст</strong>
<h1 class="light-heading">Заголовок</h1>.regular {
font-weight: 400;
}
.light-heading {
font-weight: 300;
}Важливо розрізняти призначення HTML і CSS:
HTML-елемент <strong> передає важливість тексту;
CSS-властивість font-weight змінює його візуальну товщину.
Жирний текст часто використовують для заголовків, важливих слів і кнопок. Однак не варто робити весь текст дуже товстим:
body {
font-weight: 700;
}Такий текст складніше читати, особливо у великих абзацах.
Зазвичай:
основний текст має товщину 400;
заголовки — 600 або 700;
підзаголовки — 500 або 600;
важливі короткі елементи — 700.
Товщина не повинна бути єдиним способом передавання важливої інформації. Наприклад, для повідомлення про помилку потрібен не лише жирний текст, а й зрозумілий зміст.
Для font-weight не потрібні одиниці вимірювання:
/* Правильно */
.title {
font-weight: 700;
}/* Неправильно */
.title {
font-weight: 700px;
}Навіть якщо вказати 300, 400, 500, 600 і 700, усі значення можуть виглядати однаково або майже однаково. Це залежить від доступних накреслень шрифту.
.text {
font-weight: 550;
}Дробові або проміжні значення можуть працювати по-різному залежно від шрифту. Для початку використовуйте поширені значення 400, 500, 600 і 700.
boldНе потрібно застосовувати bold до всіх елементів:
/* Невдалий варіант */
p {
font-weight: bold;
}Краще залишити звичайний текст звичайним, а жирну товщину використовувати для потрібних елементів:
p {
font-weight: 400;
}
strong {
font-weight: 700;
}font-weight і розміром текстуfont-weight змінює товщину, а не розмір тексту.
.title {
font-size: 32px;
font-weight: 700;
}У цьому прикладі:
font-size визначає розмір;
font-weight визначає товщину.
font-weight змінює товщину тексту.
normal зазвичай відповідає значенню 400.
bold зазвичай відповідає значенню 700.
Числові значення задають товщину точніше: від 100 до 900.
Результат залежить від накреслень, доступних у конкретному шрифті.
Для основного тексту зазвичай використовують 400, а для заголовків і важливих елементів — 600 або 700.
Для font-weight не вказують одиниці вимірювання.