Я не Аня, но попробую ответить.

В ЦСС font-weight отвечает за «жирность» начертания. Задается в числах от 100 до 900:

Чтобы использовать все девять начертаний, шрифт должен их поддерживать. В противном случае браузер будет подбирать ближайшее подходящее начертание из тех, что есть в шрифте.

Бюросанс поддерживает три начертания: тонкое, нормальное и жирное. Бюросайн — вариативный шрифт, поддерживает все начертания.

font‑weight

100

Бюросанс

light

Бюросайн

light

font‑weight

200

Бюросанс

light

Бюросайн

light

font‑weight

300

Бюросанс

light

Бюросайн

light

font‑weight

400

Бюросанс

regular

Бюросайн

regular

font‑weight

500

Бюросанс

regular

Бюросайн

regular

font‑weight

600

Бюросанс

bold

Бюросайн

bold

font‑weight

700

Бюросанс

bold

Бюросайн

bold

font‑weight

800

Бюросанс

bold

Бюросайн

bold

font‑weight

900

Бюросанс

bold

Бюросайн

bold

Чтобы использовать все девять начертаний, шрифт должен их поддерживать. В противном случае браузер будет подбирать ближайшее подходящее начертание из тех, что есть в шрифте.

Бюросанс поддерживает три начертания: тонкое, нормальное и жирное. Бюросайн — вариативный шрифт, поддерживает все начертания.

Кроме числовых значений поддерживаются ключевые слова: normal, bold, lighter и bolder.

normal — это обычное начертание, синоним font-weight: 400:

font‑weight: 400
font‑weight: normal

bold — жирное начертание, синоним font-weight: 700:

font‑weight: 700
font‑weight: bold

Советую использовать ключевые слова, а не их числовые значения: их проще воспринимать, не нужно запоминать магические числа.

Жирность начертания относительно родителя задаётся с помощью lighter и bolder:

В случае с вариативным шрифтом Сафари и Фаерфокс неправильно обрабатывают lighter, bolder. Сравните искусственную разрядку у font‑weight: lighter от 500 и font‑weight: bolder от 300

Бюросанс

Бюросайн

lighter

light

light

light

light

light

regular

regular

bold

bold

font‑weight

100

200

300

400

500

600

700

800

900

bolder

regular

regular

regular

bold

bold

bold

bold

bold

bold

lighter

light

light

light

light

regular

regular

bold

bold

bold

font‑weight

100

200

300

400

500

600

700

800

900

bolder

light

light

regular

regular

bold

bold

bold

bold

bold

В случае с вариативным шрифтом Сафари и Фаерфокс неправильно обрабатывают lighter, bolder. Сравните искусственную разрядку у font‑weight: lighter от 500 и font‑weight: bolder от 300

Ещё по теме

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы