x
 
Pavel Pribavil
7 мая 2020
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Почему какие-то значения font-weight в СSS пишут цифрами, а какие-то словами? (вопрос для Ани Даниловой)


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

В ЦСС 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

Поделиться
Отправить

Комментарии

Максим Карпов
7 мая 2020

Лучше, чтобы в коде было однообразие. Так как ключевыми словами покрыт не весь диапазон значений и где‑то нужно использовать числа, то я за то, чтобы везде были числа.


7 мая 2020

Можно взять postcss-font-weights и везде использовать слова:
https://github.com/jonathantneal/postcss-font-weights

Андрей Давыдов
8 мая 2020

Толщин может быть больше трёх. У шрифта Greta 10 вариантов насыщенностей: Hair, Thin, ExtraLight, Light, Regular, Medium, SemiBold, Bold, Heavy, Black. Но на усмотрение дизайнера их может быть больше, и называть их могут тоже по разному. Поэтому некоторые дизайнеры попытались это унифицировать и ввести общую систему цифр, но не очень получилось, как мы видим. Шрифт Museo Sans использует такую систему и не подпадает под вашу систему — у него есть насыщенности 100, 300, 500, 700 и 900. Возможно, эта система возродится с вариативными шрифтами, там это очень удобно.

Ещё была попытка записывать насыщенность и курсив 2 цифрами, но для этого надо было в голове представлять таблицу, где одна цифра — строка, вторая — столбец. Никто, кроме шрифтовиков, этого не знал, и идея умерла, но вы можете наблюдать это у некоторых старых шрифтов Паратайпа.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Что делать, если меня, технического директора, потихоньку отстраняют от дел? Типовые решения в вёрстке. Почему не стоит использовать float 2 Как написать аккуратный код? Часть третья: заменяемость Типовые решения в вёрстке. Обёртка для страницы 1




Недавно всплыло

Что такое профессиональная этика? 5 Куда податься? 2 9 Как избежать «эффекта Тильды»? 3