CSS @font-face font-style: 글꼴 스타일

Baseline넓은 지원

모든 주요 브라우저가 지원하는 기능입니다.

CSS @font-face @규칙의 font-style 서술자는 @font-face로 선언하는 글꼴의 스타일을 지정합니다. CSS 규칙이 글꼴 스타일을 지정할 때, 브라우저는 이 서술자를 참고해 적절한 스타일의 글꼴을 선택합니다.

구문

@font-face {
  font-style: normal;
  font-style: italic;
  font-style: oblique;
  font-style: oblique 30deg;
  font-style: oblique 30deg 50deg;
}

값

normal: 글꼴 가족의 일반 스타일입니다.
italic: 글꼴 가족의 이탤릭 스타일입니다.
oblique: 글꼴 가족의 기울임꼴 스타일입니다. <angle> 값을 하나 덧붙이면 기울임 각도를 지정할 수 있습니다. <angle> 값을 두 개 덧붙이면 font-style 속성에서 지정 가능한 기울임 각도의 범위를 지정할 수 있습니다.

예제

글꼴 가족의 일반, 이탤릭, 기울임꼴 스타일 정의하기

이 예제에서는 우선 나눔명조 글꼴 가족을 정의하고, font-style: italic을 일부 적용한 문단을 만듭니다.

@font-face {
  font-family: 'Nanum Myeongjo';
  font-style: normal;
  src: url('/assets/NanumMyeongjo.woff2') format('woff2');
}

p {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 1rem;
}

i {
  font-style: italic;
}

<p>네이버 글꼴은 <i>개인 및 기업 사용자를 포함한 모든 사용자에게 무료로 제공</i>되며 글꼴 자체를 유료로 판매하는 것을 제외한 상업적인 사용이 가능합니다.</p>

불러오는 중...

font-style: italic 서술자를 지정한 @font-face @규칙이 따로 없으므로, font-style: italic의 렌더링 결과는 일반 나눔명조 글꼴을 기울인 것처럼 그려집니다.

다음으로는 나눔명조의 이탤릭체로 나눔손글씨 끄트머리체를 지정합니다.

@font-face {
  font-family: 'Nanum Myeongjo';
  font-style: normal;
  src: url('/assets/NanumMyeongjo.woff2') format('woff2');
}
@font-face {
  font-family: 'Nanum Myeongjo';
  font-style: italic;
  src: url('/assets/NanumGgeuTeuMeoRiCe.woff2') format('woff2');
}

p {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 1rem;
}

i {
  font-style: italic;
}

<p>네이버 글꼴은 <i>개인 및 기업 사용자를 포함한 모든 사용자에게 무료로 제공</i>되며 글꼴 자체를 유료로 판매하는 것을 제외한 상업적인 사용이 가능합니다.</p>

불러오는 중...

<i> 요소로 감싼 부분이 나눔명조의 기울어진 글꼴 대신 손글씨 글꼴로 그려지는 걸 확인할 수 있습니다.

명세

CSS Fonts Module Level 4

브라우저 호환성

MDN `browser-compat-data`
	데스크톱			모바일
	데스크톱			iOS		Android
	Safari	Chrome	Firefox	Safari	Safari WebView	Chrome	Android WebView	Firefox	Samsung Internet
`font-style`