font-style
Apply italic or oblique styling and reset inherited font style.
Overview
| Class | Declarations |
|---|---|
italic | font-style: italic;
|
oblique | font-style: oblique;
|
font-style:normal | font-style: normal;
|
font-style:<style> | font-style: <style>;
|
Examples
Italicize emphasis
italic requests an italic face. Use semantic markup such as <em> when the words carry emphasis; font styling alone does not add that meaning.
<!-- Normal surrounding text · italic emphasis --><p id="context" class="m:0 font-md leading-md">Keep the <em id="target" class="italic">important detail</em> in view.</p>This preview uses an upright Geist face, so the browser synthesizes the slant. A family with a designed italic face can look different.
Use oblique text
oblique requests a slanted face. The visible distinction from italic depends on the available font; neither utility changes the words or their semantics.
<!-- font-style:normal --><p id="target" class="m:0 font-style:normal font-xl leading-sm">Design with clarity.</p><!-- oblique --><p id="target" class="m:0 oblique font-xl leading-sm">Design with clarity.</p>Reset font style
Use font-style:normal on a child to override an inherited slant. The reset changes the child’s appearance; the surrounding text keeps its italic style.
<!-- An upright child inside italic text --><p id="context" class="m:0 italic font-xl leading-md">A slanted phrase with <span id="target" class="font-style:normal">an upright detail</span>.</p>Apply conditionally
The button becomes italic on hover or keyboard focus. This makes the actual selector state observable without relying on a breakpoint.
<!-- Pointer and keyboard states --><button type="button" id="target" class="font-style:normal font-md italic:hover italic:focus-visible">Focus or hover to compare</button>