font-style
Controls the italic style of text. Use fsi for italic emphasis and fso for oblique text.
Class List
| Class | CSS | Description |
|---|---|---|
fsn | font-style: normal | Default upright text. Resets inherited italic |
fsi | font-style: italic | Italic. Used for emphasis and quotations |
fso | font-style: oblique | Oblique text. Tilts glyphs to display |
fsini | font-style: initial | Resets to initial value (normal) |
fsinh | font-style: inherit | parent element font-style inheritance |
Visual Comparison
Compares how each font-style value affects text.
Normal — fsn
The quick brown fox jumps over the lazy dog
Italic — fsi
The quick brown fox jumps over the lazy dog
Oblique — fso
The quick brown fox jumps over the lazy dog
Naming Confusion Warning
The fs prefix means different properties depending on context.
| Class | Property | How to distinguish |
|---|---|---|
fsi | font-style: italic | 알파벳 접미사 (i = italic) |
fsn | font-style: normal | 알파벳 접미사 (n = normal) |
fs0 | flex-shrink: 0 | 숫자만 (단위 없음) |
fs16px | font-size: 16px | 숫자 + 단위 (px, rem) |
Class Details
fsnfont-style: normal
Restores to default upright text. Used to reset italic inherited from parent.
<!-- Reset parent italic -->
<div class="fsi">
<p>This text is italic</p>
<p class="fsn">This text is upright again</p>
</div>fsifont-style: italic
Applies italic style. The most commonly used slant style for emphasis, quotations, foreign language notation, etc.
<!-- Emphasis text -->
<p class="fs16px cFAFAFA">
This is <span class="fsi cC4B5FD">important emphasis</span> text.
</p>
<!-- Blockquote -->
<blockquote class="fsi c71717A fs16px pl2rem bl4pxsolid27272A">
"Good design is as little design as possible."
</blockquote>fsofont-style: oblique
Applies oblique text. Unlike italic, it tilts regular glyphs instead of using dedicated italic glyphs.
<!-- oblique Text -->
<p class="fso fs16px cFAFAFA">
Oblique mechanically slants the glyphs.
</p>fsinifont-style: initial
Resets font-style to its initial value (normal).
<!-- Reset with initial -->
<div class="fsi">
<span class="fsini">This text is reset with initial</span>
</div>fsinhfont-style: inherit
Inherits the parent element's font-style.
<!-- Inherit parent style -->
<div class="fsi">
<span class="fsinh">Inherits parent italic</span>
</div>Tips & Notes
italic vs oblique
fsi uses italic glyphs designed in the font, while fso mechanically tilts regular glyphs. Use fsi in most cases.
Beware of fsi and fs0 confusion
fsi = font-style: italic, fs0 = flex-shrink: 0, fs16px = font-size: 16px. Distinguish by suffix.