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>
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ