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 요소에 대한 기본 스타일을 설정한 내장 스타일 시트를 가지고 있습니다. '브라우저의 기본 스타일 시트'(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

참고문헌

같이 보기