4.1 Свойство font-style
Еще CSS предоставляет множество свойств для управления шрифтами и их отображением на веб-страницах. Свойства font-style, font-variant и font-stretch позволяют настраивать стиль текста, его отображение и ширину. Рассмотрим каждое из этих свойств подробнее.
Свойство font-style определяет стиль текста. Оно используется для установки наклонного начертания (курсива) или обычного стиля текста.
Значения:
normal: обычный стиль текста (по умолчанию)italic: наклонный текст (курсив)oblique: наклонный текст, аналогичный italic, но отличается способом наклона
Пример использования:
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
<body>
<p class="normal">Это обычный текст.</p>
<p class="italic">Это наклонный текст (курсив).</p>
<p class="oblique">Это наклонный текст (oblique).</p>
</body>
4.2 Свойство font-variant
Свойство font-variant управляет отображением текста в малых заглавных буквах (капителях). Оно позволяет изменять шрифт так, чтобы все буквы стали заглавными, но с меньшим размером для изначально строчных букв.
Значения:
normal: обычный текст (по умолчанию)small-caps: текст в малых заглавных буквах
Пример использования:
.normal {
font-variant: normal;
}
.small-caps {
font-variant: small-caps;
}
<body>
<p class="normal">Это обычный текст.</p>
<p class="small-caps">Это текст в малых заглавных буквах.</p>
</body>
Дополнительные значения (CSS Fonts Level 4)
CSS Fonts Level 4 добавляет дополнительные значения для свойства font-variant, такие как all-small-caps, petite-caps, all-petite-caps, unicase и titling-caps. Однако они поддерживаются не во всех браузерах.
4.3 Свойство font-stretch
Свойство font-stretch управляет степенью сжатия или растяжения шрифта. Оно изменяет ширину шрифта, не влияя на высоту, и используется для выбора подходящего варианта шрифта, если он доступен.
Значения:
normal: обычная ширина шрифта (по умолчанию)ultra-condensed: максимально сжатый шрифтextra-condensed: очень сжатый шрифтcondensed: сжатый шрифтsemi-condensed: умеренно сжатый шрифтsemi-expanded: умеренно растянутый шрифтexpanded: растянутый шрифтextra-expanded: очень растянутый шрифтultra-expanded: максимально растянутый шрифт
Пример использования:
.normal {
font-stretch: normal;
}
.condensed {
font-stretch: condensed;
}
.expanded {
font-stretch: expanded;
}
<body>
<p class="normal">Это текст с нормальной шириной шрифта.</p>
<p class="condensed">Это текст с сжатой шириной шрифта.</p>
<p class="expanded">Это текст с растянутой шириной шрифта.</p>
</body>
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ