Font Weight in CSS: A Comprehensive Guide

CSS свойство font-weight определяет жирность шрифта для текстового содержимого. Оно может принимать значения от 100 до 900 либо ключевые слова normal и bold:

css
/* Пример задания font-weight */
p {
  font-weight: 700; /* жирный шрифт */
}

Значения font-weight обычно варьируются от 100 до 900, где 100 соответствует самому тонкому шрифту, а 900 - самому жирному. Значениями, кратными 100, обычно соответствуют предустановленные жирности шрифтов в соответствующих типографских семействах. Например, в семействе "Roboto" есть настройки жирности "Thin 100", "Light 300", "Regular 400", "Medium 500", "Bold 700" и "Black 900".

Ключевые слова normal и bold привязываются к предустановленным жирностям шрифта. Normal соответствует "обычному" (нежирному) шрифту, а bold - жирному шрифту. Вместо ключевого слова bold можно использовать значение >= 700:

css
/* Пример использования значений normal и bold */
p.normal {
  font-weight: normal; /* обычный шрифт */
}

p.bold {
  font-weight: bold; /* жирный шрифт */
}

p.bolder {
  font-weight: bolder; /* шрифт с жирностью, увеличенной на 1 уровень из default'ной */
}

p.lighter {
  font-weight: lighter; /* шрифт с жирностью, уменьшенной на 1 уровень из default'ной */
}

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