font-style 속성의 이해

font-style 속성은 글꼴의 스타일을 지정합니다.

이 속성은 다음 글꼴 스타일 중 하나를 선택할 수 있습니다.

  • normal(일반)
  • italic(이탤릭체)
  • oblique(단순히 기울인 사선 모양)
CSS 
selector {
    font-style: /* normal | italic | oblique */
}

italic(이탤릭체)는 필기체를 바탕으로 글꼴 디자이너가 설계한 글꼴 스타일이며, oblique(단순히 기울인 사선 모양)과는 차이가 있습니다.

아래의 그림은 'Open Sans' 글꼴의 italic(이탤릭체)와 oblique(단순히 기울인 사선 모양)을 캡쳐한 모습니다. 이 두 글꼴 스타일을 비교해 보세요.

italic vs. oblique
italic vs. oblique

예제

CSS 
h2 {
    font-style: italic;
}
h2:hover {
    font-style: normal;
}
HTML 
<h2>Heading 2</h2>
실제 적용된 모습 마우스 커서를 글자에 올리면 normal(일반)로 변경됩니다.

형식 구문

CSS 
selector {
    font-style: /* value */
}

구문

CSS 
font-style: normal;
font-style: italic;
font-style: oblique;

/* 전역 값 */
font-style: inherit;
font-style: initial;
font-style: unset;
font-style: revert;
font-style: revert-layer;

값

font-style 속성의 값
normal 글꼴 패밀리 내에서 normal(일반)으로 분류된 글꼴을 선택합니다.
italic italic(이탤릭체)로 분류된 글꼴을 선택합니다.
italic(이탤릭체) 버전이 없는 경우, oblique(단순히 기울인 사선 모양)으로 분류된 글꼴이 대신 사용됩니다.
italic(이탤릭체)와 oblique(단순히 기울인 사선 모양) 둘 다 없는 경우에는 스타일이 인위적으로 시뮬레이션(글꼴을 기울이거나 변형)됩니다.
oblique oblique(단순히 기울인 사선 모양)으로 분류된 글꼴을 선택합니다.
oblique(단순히 기울인 사선 모양) 버전이 없는 경우, italic(이탤릭체)로 분류된 글꼴이 대신 사용됩니다.
italic(이탤릭체)와 oblique(단순히 기울인 사선 모양) 둘 다 없는 경우에는 스타일이 인위적으로 시뮬레이션(글꼴을 기울이거나 변형)됩니다.

형식 정의

font-style 속성의 형식 정의
초깃값 normal
적용 요소 모든 요소
상속 예
애니메이션 아니오

<em>, <i>, <cite>, <dfn>, <address>, <var> 태그의 경우 대부분의 브라우저에서는 초깃값이 italic입니다.

HTML 
<em>em</em>
<hr>
<i>i</i>
<hr>
<cite>cite</cite>
<hr>
<dfn>dfn</dfn>
<hr>
<address>address</address>
<hr>
<var>var</var>
실제 적용된 모습

접근성 고려사항

이탤릭체나 기울인 글꼴로 설정된 긴 텍스트 섹션은
일반적으로 가독성을 떨어뜨릴 수 있습니다. 따라서 중요한 정보를 전달할 때는 일반 글꼴을 사용하는 것이 좋습니다. 특히 시각적으로 불편한 사용자(예: 시각 장애인, 난독증을 가진 사용자)에게는 이탤릭체와 기울인 글꼴이 더 어려울 수 있습니다.

브라우저 호환성

font-style 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
font-style 1 12 1 1

명세서

font-style 속성의 명세서 사양
명세서 사양
font-style CSS Fonts Module Level 4
#font-style-prop

참고문헌

같이 보기