AAtomic CSS

font-style

텍스트의 기울임 스타일을 제어합니다. fsi로 이탤릭 강조, fso로 비스듬한 텍스트를 적용합니다.

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS설명
fsnfont-style: normal기본 직립 텍스트. 상속된 기울임 리셋
fsifont-style: italic이탤릭체. 강조, 인용에 사용
fsofont-style: oblique비스듬한 텍스트. 글리프를 기울여 표시
fsinifont-style: initial초기값(normal)으로 리셋
fsinhfont-style: inherit부모 요소의 font-style 상속

시각적 비교

각 font-style 값이 텍스트에 어떤 영향을 주는지 비교합니다.

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

네이밍 혼동 주의

fs 접두사는 문맥에 따라 다른 속성을 의미합니다.

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스속성구분법
fsifont-style: italic알파벳 접미사 (i = italic)
fsnfont-style: normal알파벳 접미사 (n = normal)
fs0flex-shrink: 0숫자만 (단위 없음)
fs16pxfont-size: 16px숫자 + 단위 (px, rem)

클래스별 상세

fsnfont-style: normal

기본 직립 텍스트로 되돌립니다. 부모에서 상속된 이탤릭을 리셋할 때 사용합니다.

<!-- 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

이탤릭체를 적용합니다. 강조, 인용, 외국어 표기 등에 가장 많이 사용되는 기울임 스타일입니다.

<!-- 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

비스듬한 텍스트를 적용합니다. italic과 달리 별도의 이탤릭 글리프가 아닌 일반 글리프를 기울여 표시합니다.

<!-- oblique Text -->
<p class="fso fs16px cFAFAFA">
  Oblique mechanically slants the glyphs.
</p>

fsinifont-style: initial

font-style을 초기값(normal)으로 되돌립니다.

<!-- Reset with initial -->
<div class="fsi">
  <span class="fsini">This text is reset with initial</span>
</div>

fsinhfont-style: inherit

부모 요소의 font-style을 상속받습니다.

<!-- Inherit parent style -->
<div class="fsi">
  <span class="fsinh">Inherits parent italic</span>
</div>

팁 & 주의사항

italic vs oblique

fsi는 폰트에 디자인된 이탤릭 글리프를 사용하고, fso는 일반 글리프를 기계적으로 기울입니다. 대부분의 경우 fsi를 사용하세요.

fsi와 fs0 혼동 주의

fsi = font-style: italic, fs0 = flex-shrink: 0, fs16px = font-size: 16px. 접미사로 구분합니다.

font-weightfont-sizefont-variant