4.1 The font-style Property
CSS provides a bunch of properties for handling fonts and how they show up on web pages. The font-style, font-variant, and font-stretch properties let you tweak text style, display, and width. Let’s check out each of these properties in more detail.
The font-style property sets the style of the text. It’s used to specify italicized (cursive) or regular text styles.
Values:
normal: regular text style (default)italic: italicized text (cursive)oblique: slanted text, similar to italic but slanted differently
Example Usage:
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
<body>
<p class="normal">This is normal text.</p>
<p class="italic">This is italic text (cursive).</p>
<p class="oblique">This is oblique text.</p>
</body>
4.2 The font-variant Property
The font-variant property handles the display of text in small caps. It lets you change the font so all letters become uppercase, but with originally lowercase letters being smaller.
Values:
normal: regular text (default)small-caps: text in small caps
Example Usage:
.normal {
font-variant: normal;
}
.small-caps {
font-variant: small-caps;
}
<body>
<p class="normal">This is normal text.</p>
<p class="small-caps">This is text in small caps.</p>
</body>
Additional Values (CSS Fonts Level 4)
CSS Fonts Level 4 adds more values for the font-variant property, like all-small-caps, petite-caps, all-petite-caps, unicase, and titling-caps. But they’re not supported in all browsers.
4.3 The font-stretch Property
The font-stretch property controls how stretched or compressed a font is. It changes the width of the font without affecting the height and is used to select a suitable font variant if available.
Values:
normal: normal font width (default)ultra-condensed: ultra-compressed fontextra-condensed: extra-compressed fontcondensed: compressed fontsemi-condensed: semi-compressed fontsemi-expanded: semi-expanded fontexpanded: expanded fontextra-expanded: extra-expanded fontultra-expanded: ultra-expanded font
Example Usage:
.normal {
font-stretch: normal;
}
.condensed {
font-stretch: condensed;
}
.expanded {
font-stretch: expanded;
}
<body>
<p class="normal">This is text with normal font width.</p>
<p class="condensed">This is text with condensed font width.</p>
<p class="expanded">This is text with expanded font width.</p>
</body>
GO TO FULL VERSION