CSS: какая разница между шрифтом: смелее и font-weight: жирным шрифтом

Ответ 1

bolder является относительный вес шрифта:

Значения "более смелые" и "более светлые" выбирают вес шрифта, относящийся к весу, унаследованному от родительского

bolder и lighter являются частью официальной спецификации . То, как они интерпретируются и отображаются, зависит от браузера.

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

Вот вопрос с фоновой информацией: Полезны ли значения свойств CSS font-weight?

Ответ 2

Ответ Пекки технически корректен, но, судя по комментариям к этому ответу, последствия этого не были правильно поняты.

Сначала нам нужно понять разницу между указанным весом, вычисленным весом и весом.

Для bold заданный вес "полужирный", вычисленный вес "700", а полученный вес зависит от шрифта, и единственная гарантия заключается в том, что он не будет легче, чем элементы с более низким расчетным весом, (т.е. поскольку "нормальный" равен "400" , "жирный" никогда не будет казаться более легким, чем "нормальный" (хотя он может отображаться одинаково).

Для bolder указанный вес "более смелый" , а вычисленный вес "400" , если элемент контейнера имеет вычисленный вес меньше или равен 300, иначе "700", если элемент контейнера имеет вычисленный вес меньше или равен 500, в противном случае "900". Возвращаемый вес снова зависит от шрифта с той же гарантией.

Поскольку шрифты обычно поддерживают только normal и bold веса, это часто означает, что font-weight:bold и font-weight:bolder получаются одинаково, даже если они имеют разные расчетные веса.

Но это не обязательно, даже если шрифт поддерживает только эти два веса. В частности, если элемент контейнера имеет рассчитанный вес менее 400, тогда "более смелый" будет вычислять вес "400" и отображать его как элемент с заданным весом "нормальный" .

Чтобы проиллюстрировать это, см. этот JsFiddle: http://jsfiddle.net/UgAa5/ ¹

<style>
  p { font-weight:300; font-size:2em }
  #scenario1 b { font-weight:bolder; }
  #scenario2 b { font-weight:bold; }
</style>

<p id="scenario1">
    <span>plain</span>
    <b>bold?</b>
</p>    

<p id="scenario2">
    <span>plain</span>
    <b>bold?</b>
</p>

¹ _{Текущие версии IE, Firefox, Chrome и Opera демонстрируют это правильно. Старые браузеры, такие как Safari 5.1, не работают.}

² _{Спецификация HTML5 говорит, что элемент <b> должен иметь размер шрифта по умолчанию "более смелый" . Firefox и IE делают это, но браузеры на основе webkit/blink по умолчанию имеют "жирный шрифт", а normalize.css применяет параметр font-weight:bold к элементу <b> для всех браузеров.}