Font Weight CSS: основные принципы и примеры применения

CSS (Cascading Style Sheets) — это язык стилей, который используется для оформления веб-страниц. Один из ключевых аспектов стилизации текста в CSS — это задание насыщенности шрифта, или, как это называется, font weight.

Свойство font-weight определяет жирность или назначает насыщенность шрифта. Есть несколько возможных значений для font-weight в CSS:

• normal: определяет обычную насыщенность шрифта, это значение по умолчанию;
• bold: устанавливает жирное начертание шрифта;
• bolder: устанавливает более жирное начертание относительно родительского элемента;
• lighter: устанавливает менее жирное начертание относительно родительского элемента;
• 100-900: определяют насыщенность шрифта на диапазоне от 100 (самое тонкое) до 900 (самое жирное).

Примеры использования свойства font-weight в CSS:

1. Применение значения bold для создания жирного текста:

p {
  font-weight: bold;
}

2. Применение значения lighter для создания менее жирного текста:

h1 {
  font-weight: lighter;
}

3. Применение числового значения для точного контроля насыщенности шрифта:

h2 {
  font-weight: 600;
}

4. Наследование насыщенности шрифта от родительского элемента:

div {
  font-weight: bolder;
}

Значение font weight также может совмещаться с другими свойствами CSS, например, font-style и font-size, для создания еще более настраиваемых стилей текста. Благодаря свойству font-weight, вы можете контролировать насыщенность шрифта и визуально выделить определенные части текста или заголовков на веб-странице.

CSS предоставляет гибкие средства для манипулирования стилем текста, и свойство font-weight является одним из инструментов, позволяющих создавать разнообразные эффекты стилизации. Надеюсь, эти примеры и описание помогли вам лучше понять использование свойства font-weight в CSS. Если у вас возникли еще вопросы, не стесняйтесь задавать их!