font-style

Setting font style of an element.

Overview

Examples

Italicize emphasis

Use italic for emphasized text when the typeface includes an italic style.

<em class="italic">Important</em>

@layer utilities {    .italic {        font-style: italic    }}

Use oblique text

Use oblique when the design calls for a slanted style rather than a true italic face.

<span class="oblique">Draft</span>

Reset font style

Use font-style:normal to cancel inherited italic or oblique styles.

<span class="italic">    <span class="font-style:normal">Not emphasized</span></span>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<span class="italic:hover font-style:normal@sm font-style:normal@print">...</span>