AAtomic CSS

font-style

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

클래스 목록

클래스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 접두사는 문맥에 따라 다른 속성을 의미합니다.

클래스속성구분법
fsifont-style: italic알파벳 접미사 (i = italic)
fsnfont-style: normal알파벳 접미사 (n = normal)
fs0flex-shrink: 0숫자만 (단위 없음)
fs16pxfont-size: 16px숫자 + 단위 (px, rem)

클래스별 상세

fsnfont-style: normal

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

<!-- 부모 이탤릭 리셋 -->
<div class="fsi">
  <p>이 텍스트는 이탤릭</p>
  <p class="fsn">이 텍스트는 다시 직립</p>
</div>

fsifont-style: italic

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

<!-- 강조 텍스트 -->
<p class="fs16px cFAFAFA">
  이것은 <span class="fsi cC4B5FD">중요한 강조</span> 텍스트입니다.
</p>

<!-- 인용문 -->
<blockquote class="fsi c71717A fs16px pl2rem bl4pxsolid27272A">
  "좋은 디자인은 가능한 한 적게 디자인하는 것이다."
</blockquote>

fsofont-style: oblique

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

<!-- oblique 텍스트 -->
<p class="fso fs16px cFAFAFA">
  Oblique는 글리프를 기계적으로 기울입니다.
</p>

fsinifont-style: initial

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

<!-- initial로 리셋 -->
<div class="fsi">
  <span class="fsini">이 텍스트는 initial로 리셋됨</span>
</div>

fsinhfont-style: inherit

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

<!-- 부모 스타일 상속 -->
<div class="fsi">
  <span class="fsinh">부모의 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