CSS / Reference / font-style

font-style은 일반체, 이탤릭체, 기울어진 서체를 선택합니다. italic은 글꼴이 제공하는 이탤릭 형태를 요청하고, oblique는 기울어진 형태를 요청합니다. 두 값이 항상 같은 모습으로 보이거나 반드시 다른 모습으로 보이는 것은 아닙니다.

문법과 주요 값

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

.emphasis { font-style: italic; }
.slanted { font-style: oblique 12deg; }

값과 적용 조건은 MDN font-style에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 font-style-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>font-style 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { font: 28px/1.6 Georgia, serif; }
.target { font-style: italic; }
.reference { font-style: oblique; }
</style>
</head>
<body>
<main id="demo">
<h1>font-style 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">italic</p><div class="target">Hello CSS typography</div></div><div class="b"><p class="label">oblique</p><div class="reference">Hello CSS typography</div></div></section>
</main>
</body>
</html>

동일한 글꼴에서 italic과 oblique의 형태를 비교합니다. 해당 서체가 없으면 브라우저의 대체 선택이나 합성으로 비슷한 모양이 나올 수 있습니다.

서체 파일과 합성 구분

italic 전용 글꼴이 로드되어 있으면 단순히 일반체를 기울이는 것과 다른 글자 형태가 나타날 수 있습니다. 웹 폰트에서는 @font-face에 올바른 font-style을 지정해야 해당 얼굴이 선택됩니다. 폰트 로딩 실패를 CSS 값의 오류로 단정하지 마세요.

의미 있는 강조와 시각 스타일

em 요소는 강조의 의미를 담고, font-style은 표현만 바꿉니다. font-style: normal로 em의 기본 기울임을 없애도 강조 의미가 사라지는 것은 아닙니다. 한글과 영문이 섞인 본문에서는 긴 기울임 문장이 읽기 어려워지지 않는지 확인하세요.

한 가지 설정씩 바꾸어 확인하기

앞의 전체 코드를 저장한 예제 파일을 사용합니다. 지정한 선택자의 CSS만 변경하고, 서로 다른 비교 조건을 한꺼번에 바꾸지 않습니다.

1. 기존 .target과 .reference의 글자를 선택하고 Elements → Computed → Rendered Fonts에서 실제 서체를 확인합니다. 요청한 font-style 값과 렌더링한 글꼴은 다른 정보입니다.
2. font-style만 normal로 바꾸어 비교한 뒤 italic/oblique로 복구합니다. 실제 파일을 제공하지 않은 이름을 웹 폰트 다운로드 성공 사례로 해석하지 않습니다.

문자 크기·줄 높이·서체를 함께 조정하려면 글꼴, 글자 크기, 굵기, 줄 간격 설정하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 font-family입니다.

적용되지 않거나 예상과 다를 때

• 글꼴 파일에 italic 또는 oblique 서체가 있는지 확인합니다.
• font 단축 속성이 뒤에서 font-style을 다시 normal로 바꾸는지 확인합니다.