font-style 속성의 이해

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

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

  • normal(일반)
  • italic(이탤릭체)
  • oblique(단순히 기울인 사선 모양)

형식 구문

CSS 
selector {
    font-style: /* normal | italic | oblique */
}
CSS 데모: font-style 데모 버튼을 클릭해 보세요!

값

font-style 속성의 값
normal 글꼴 내에서 normal(일반)으로 분류된 글꼴을 선택합니다.
italic italic(이탤릭체)로 분류된 글꼴을 선택합니다.
  • italic(이탤릭체) 버전이 없는 경우에는 oblique(단순히 기울인 사선 모양)으로 분류된 글꼴이 대신 사용됩니다.
  • italic(이탤릭체)와 oblique(단순히 기울인 사선 모양) 둘 다 없는 경우에는 스타일이 인위적으로 시뮬레이션(글꼴을 기울이거나 변형)됩니다.
oblique oblique(단순히 기울인 사선 모양)으로 분류된 글꼴을 선택합니다.
  • oblique(단순히 기울인 사선 모양) 버전이 없는 경우에는 italic(이탤릭체)로 분류된 글꼴이 대신 사용됩니다.
  • 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 
/* 키워드 값 */
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
적용 요소 모든 요소
상속 예
애니메이션 아니오

<em>, <i>, <cite>, <dfn>, <address>, <var> 태그의 경우 대부분의 '브라우저의 기본 스타일 시트'에서는 설정값이 italic입니다.

부연설명
각 브라우저는 HTML 요소에 대한 기본 스타일을 설정한 내장 스타일 시트를 가지고 있습니다. '브라우저의 기본 스타일 시트'(User Agent Stylesheet)라고 합니다. 이 스타일 시트는 웹 페이지의 기본 디자인을 정의합니다. 브라우저의 기본 스타일은 사용자 경험을 개선하기 위해 각 브라우저의 개발자가 설정한 것입니다. 여기에서 설정된 값들은 브라우저가 렌더링될 때 개발자에 의해 해당 속성의 값이 명시되지 않았을 때 적용되는 기본값입니다.

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

참고문헌

같이 보기