Приклади використання
Властивість font-weight дозволяє встановити товщину, з якою відображатимуться літери тексту. Як правило, властивість font-weight використовується для відображення жирного тексту (жирне значення):
Lorem ipsum біль сидить на місці, освячуючи жирний еліт. Donec dignissim. Pellentesque id pede vitae pede ultricies gravida. Будьте вульпутатними. Vestibulum quis ipsum. Enean nec quam. Будьте ultricks tempor massa.
Іншим поширеним використанням властивості font-weight є відображення тексту, який спочатку відображався жирним шрифтом, наприклад, мітка, із звичайним стилем з HTML:
На додаток до напівжирного та нормального значення властивість шрифту визначає відносні значення (світліше тонше) та сміливіше товще). Посилання, яке береться для того, щоб зробити лист більш-менш товстим, - це товщина, успадкована від елемента контейнера.
Наступний приклад показує різні результати, які дають світліші та сміливіші значення залежно від товщини літери в елементі контейнера:
Lorem ipsum dolor sit amet, concectetuer adipiscing elit.
Lorem ipsum dolor sit amet, concectetuer adipiscing elit.
Lorem ipsum dolor sit amet, concectetuer adipiscing elit.
Lorem ipsum dolor sit amet, concectetuer adipiscing elit.
У наведеному вище прикладі браузери визначають товщину літери елемента-контейнера (у цьому випадку абзацу) і збільшують (жирніше) або зменшують (світліше) його товщину у внутрішньому елементі (в даному випадку -). Власне, це лише теоретичне пояснення того, що повинні робити браузери, оскільки на практиці результати дуже різні.
Основна проблема властивості font-weight полягає в тому, що майже жоден шрифт, що використовується звичайними користувачами, не має декількох різних ваг. Насправді більшість шрифтів мають лише звичайний стиль (нормальне значення) та жирний стиль (жирне значення). Отже, поки всі шрифти не мають декількох різних ваг, більш жирні та світлі значення практично не корисні.
Крім того, шрифти з різною вагою використовують номенклатуру, яка не є стандартною, а отже, варіюється від одного шрифту до іншого. Якщо взяти для прикладу товщину, яка виглядає напівжирним, назва цієї товщини може бути напівжирним, звичайним, римським, середнім, напівжирим або чорним, залежно від шрифту.
З цієї причини у властивості font-weight не використовуються слова для посилання на кожну вагу, але визначаються дев'ять числових значень в діапазоні від 100 до 900. Нормальне значення відповідає числовому значенню 400, а напівжирне значення відповідає числовому значенню 700 .
Стандарт CSS 2.1 пояснює, що кожне числове значення вказує на те, що ця товщина має принаймні таку ж товщину, як попереднє числове значення. У наступному прикладі показано дев'ять абзаців з різною товщиною, хоча на практиці браузери показують лише дві різні товщини:
Lorem ipsum dolor sit amet, concectetuer adipiscing elit.
Lorem ipsum dolor sit amet, concectetuer adipiscing elit.
Lorem ipsum dolor sit amet, concectetuer adipiscing elit.
Lorem ipsum dolor sit amet, concectetuer adipiscing elit.
Lorem ipsum dolor sit amet, concectetuer adipiscing elit.
Lorem ipsum dolor sit amet, concectetuer adipiscing elit.
Lorem ipsum dolor sit amet, concectetuer adipiscing elit.
Lorem ipsum dolor sit amet, concectetuer adipiscing elit.
Lorem ipsum dolor sit amet, concectetuer adipiscing elit.
Коли шрифт має лише звичайний стиль та напівжирний стиль, числові значення 100, 200, 300, 400 та 500 відповідають звичайному стилю, а числові значення 600, 700, 800 та 900 відповідають жирному стилю.
Відповідність між вагами, визначеними кожним шрифтом, і числовими значеннями властивості font-weight залежить від кожного браузера. Однак застосовуються деякі загальні правила, наприклад, такі:
- Якщо шрифт визначає числову шкалу товщини з усіма дев'ятьма значеннями (такими як шрифти OpenType), ці значення використовуються безпосередньо.
- Якщо шрифт має шрифт, який називається Середній, а інший - Книга, Звичайний, Римський або Звичайний, стилю Середній присвоюється числове значення 500 .
- Жирний стиль зазвичай відповідає числовому значенню 700 .
- Якщо шрифт має менше дев'яти різних ваг, відсутні цифрові значення присвоюються за алгоритмом, роз'ясненим нижче:
- Якщо значення 500 не було призначене, воно призначається в тому ж стилі, що і значення 400
- Якщо значення 600, 700, 800 та 900 не були зіставлені, вони відображаються на наступну доступну товщину (як правило, еквівалентне напівжирне значення). Якщо інших ваг немає, вони призначаються стилю, що відповідає попередній товщині (зазвичай еквівалентно нормальному значенню).
- Якщо значення 100, 200 та 300 не були призначені, вони присвоюються попередній доступній товщині. Якщо попередня товщина недоступна, вони призначаються наступній товщині.
Наприклад, якщо у вас є шрифт із чотирма товщинами:
| TypeNameRegular Letter | 400 | 100, 200, 300 |
| TypeNameLetter Medium | 500 | - |
| TypeNameLetter Жирний шрифт | 700 | 600 |
| TypeNameLetter Heavy | 800 | 900 |
Наприклад, якщо у вас є шрифт із шістьма товщинами:
| TypeNameLetter Book | 400 | 100, 200, 300 |
| TypeNameLetter Medium | 500 | - |
| TypeNameLetter Жирний шрифт | 700 | 600 |
| TypeNameLetter Heavy | 800 | - |
| TypeNameLetter Black | 900 | - |
| TypeNameLetter ExtraBlack | - | - |
Властивість font-weight є однією з найбільш недостатньо використовуваних властивостей у CSS. Обмеження браузерів та шрифтів, що використовуються звичайними користувачами, перешкоджають правильній роботі за межами звичайних і напівжирних значень .