CSS · справочник
Свойство font-weight
font-weight задаёт насыщенность символов. Значение работает только если выбранный шрифт содержит соответствующее начертание или поддерживает переменную ось веса.
Числа и ключевые слова
normal соответствует 400, bold — 700. Числовая запись показывает систему яснее и позволяет использовать промежуточные веса.
body { font-weight: 400; }
.lead { font-weight: 500; }
h1 { font-weight: 800; }Загрузка начертаний
Если подключён только вес 400, браузер может искусственно утолщать текст. Загружай только реально используемые веса, чтобы не увеличивать объём шрифтовых файлов.
@font-face {
font-family: 'Example';
src: url('/fonts/example-700.woff2') format('woff2');
font-weight: 700;
}Частые ошибки
- Вес отсутствует в файле шрифта.
- Слишком много начертаний.
- Весь интерфейс жирный.
- Тонкий серый текст с плохим контрастом.
Практика
Оформи карточку тремя весами: основной текст 400, метка 600, заголовок 750 или ближайшим доступным значением.