Font weight 400: font-weight | WebReference

Почему какие‑то значения 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, bolder. Сравните искусственную разрядку у font‑weight: lighter от 500 и font‑weight: bolder от 300

Ещё по теме

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

Веб‑разработка

Отправить

Поделиться

Поделиться

Запинить

Твитнуть

Свежак

css — Почему вес шрифта по умолчанию 400?

По причине отсутствия единиц

Толщина шрифта не указана в единице, потому что с увеличением и уменьшением толщины шрифта нет конкретной, идентифицируемой «вещи», которую вы «переворачиваете вверх и вниз». В отличие от размера шрифта, увеличение/уменьшение веса шрифта на компьютерах традиционно не достигалось программно — каждый уровень толщины шрифта должен был создаваться дизайнером вручную как совершенно другой шрифт.

Это связано с тем, что программно изменить толщину шрифта намного сложнее, чем изменить, скажем, размер. Жирный текст не просто добавляет толщину всему символу. Он добавляет контраста, выборочно увеличивая толщину одних частей буквы по сравнению с другими. Обратите внимание на шрифт ниже, как некоторые части буквы «а» становятся очень толстыми с более высоким весом, в то время как другие части той же буквы не увеличиваются так сильно.

Это непросто сделать программно, в основном это приходилось делать вручную, чтобы это выглядело хорошо — типографы создавали несколько разных версий своего шрифта — обычно три — разработчики загружали все три стиля и шрифт CSS Свойство -weight будет настроено только на изменение между этими тремя, обычно на 300, 400 и 700. Это предполагает, что вы хотите настоящий полужирный шрифт/курсив. Фальшивые стили — искусственный полужирный шрифт, искусственный курсив и т. д. — были предоставлены браузерами, но результаты, как правило, были не очень хорошими.

Сейчас все движется к вариативным шрифтам, представленным в 2016 году. Это шрифты, которые специально разработаны, чтобы дать разработчикам полный контроль над атрибутами стиля, такими как вес шрифта и выделение курсивом. По сути, создатели шрифтов создают несколько различных вариаций своего шрифта с разным уровнем насыщенности, а затем компьютер разумно заполняет промежутки между ними, так что у разработчиков теперь есть потенциально бесконечное количество степеней плотности шрифта, которые можно использовать для данного шрифта.

Однако даже с этим изменением трудно определить конкретную, научно измеримую «вещь», которая делает текст более или менее тяжелым. Поэтому я сомневаюсь, что в ближайшее время мы увидим какую-либо не относительную единицу для веса шрифта.

По причине кратности 100 и значения по умолчанию 400

Система основана на системе Linotype, которая была разработана для шрифта Univers в 1957 году. Идея заключалась в том, что вы должны использовать три цифры для указания толщины шрифта , ширина и выделение курсивом в указанном порядке. Так 099 будет очень светлым, очень широким и очень курсивным. 905 будет очень тяжелым, очень сжатым, со средним курсивом. Это просто пример, фактические доступные значения были другими. Люди больше использовали «весовую» часть системы, чем две другие цифры, поэтому вторые две цифры использовались все меньше и меньше, пока они не стали рудиментарными, и люди забыли, что система нумерации использовалась для чего-то другого, кроме указания веса. Было бы действительно разумнее иметь 1-9масштаб для веса шрифта на данный момент, но 100-900 теперь стали обычными.

Я предполагаю, что 400 — это значение по умолчанию просто потому, что оно находится прямо посередине. Я думаю, что они выбрали 400, а не 500, потому что люди чаще хотят сделать свой текст жирным, чем светлым, поэтому они выбрали значение по умолчанию, которое оставляет для этого больше места.

html — Числа шрифта CSS: как они работают?

Я пытаюсь использовать ширину шрифта, чтобы настроить жирность шрифта. Насколько я понимаю, значение 500 — это нормальный вес шрифта, а значение 700 — это вес шрифта по умолчанию для полужирного шрифта.

Однако, когда я поставил 599, шрифт вообще не изменился. Но когда я ставлю 600, он переходит к полужирному шрифту по умолчанию. Те же результаты при значении 600-900. Затем, когда вы превысите 900, вес шрифта вернется к нормальному весу шрифта. Почему это происходит?

 #стильшрифта {
    граница: 1px сплошной черный;
    вес шрифта: 599;
} 

 
 fontStyle 
 

• html
• css
• шрифты

3

Подробная информация о том, как числовые значения сопоставляются с жирностью шрифта, описана в спецификации, которая гласит:

Значения от 100 до 900 образуют упорядоченную последовательность, где каждое число указывает на вес, который, по крайней мере, такой же темный, как и его предшественник. ключевое слово «обычный» является синонимом «400», а «жирный» является синонимом с «700». Ключевые слова, отличные от «обычный» и «жирный», были показаны как часто путали с названиями шрифтов, поэтому числовая шкала была выбрали для 9-список значений.

‘599’ не является допустимым значением для свойства font-weight

1

Толщина шрифта по умолчанию — 400, и шрифты работают с числом, кратным 100. 300 — светлый (если ваш шрифт поддерживает его), 400 — обычный, 600 — полужирный и 700 — полужирный. Вы не можете использовать числа между ними.

вес шрифта работает от 100 до 900 с шагом 100. Обычный вес — 400. Полужирный — 700.

599 не является распознаваемым весом, так как он не является приращением 100. Все, что больше 900 тоже не распознается.

Таким образом, вы должны использовать font-weight: 600 для полужирного шрифта или font-weight: 700 для жирного шрифта.

Эта ссылка помогает объяснить https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

Ну, вы использовали 599, вы можете использовать только числа 100, 200, 300 и т.