CSS의 font-style 속성을 사용하면 글꼴에 다양한 스타일 특성을 적용해 텍스트를 강조할 수 있습니다. 이 글에서는 font-style의 기본 문법부터 각 옵션의 차이점, 실전 활용 예제까지 차근차근 살펴보겠습니다.
font-style 문법과 사용 가능한 옵션
font-style 속성에는 아래와 같은 키워드 값을 사용할 수 있습니다. 모든 값은 키워드 형태로 지정됩니다.
font-style: normal; font-style: italic; font-style: oblique; font-style: oblique 30deg;
또한 다른 CSS 속성과 마찬가지로 전역(global) 키워드도 함께 사용할 수 있습니다.
/* 부모 요소의 값 상속 */ font-style: inherit; /* 브라우저 기본값 적용 */ font-style: initial; /* 부모 값이 있으면 상속, 없으면 초기값 적용 */ font-style: unset;
normal
normal은 지정된 font-family 안에 포함된 기본(정자체) 글꼴을 의미합니다.
oblique
oblique는 글자를 비스듬히 기울이는 스타일입니다. 원한다면 각도를 직접 지정할 수 있으며, 허용 범위는 -90도에서 90도 사이입니다. 각도를 생략하면 기본값인 14도가 적용됩니다.
italic과 oblique의 관계
italic과 oblique는 서로 대체 가능하게 동작하는 경우가 많습니다. 이는 브라우저 호환성 때문입니다. 예를 들어 특수 폰트를 사용 중일 때 브라우저가 oblique를 찾지 못하거나 지원하지 않으면, 자동으로 italic으로 대체해 렌더링합니다. 반대의 경우도 마찬가지입니다.
따라서 oblique를 사용하기 전에는 해당 키워드가 사용 중인 브라우저에서 완전히 지원되는지 먼저 확인하는 것이 좋습니다.
font-style 실전 예제
먼저 h1 제목에 스타일을 적용해 보겠습니다.
h1.title {
font-family: 'Tangerine';
font-style: normal;
}
여기서는 Google Fonts에서 가져온 'Tangerine' 폰트를 사용했습니다. 이 폰트의 normal 스타일은 필기체(cursive) 형태이기 때문에 화면에도 그대로 필기체로 표시됩니다.
흥미로운 점은, 이 폰트에 italic 스타일을 적용하면 글자가 더 많이 기울어진다는 것입니다. 이미 충분히 흘려 쓴 느낌의 폰트라 굳이 기울임을 추가하고 싶지 않다면, normal을 유지하는 것이 좋습니다.
font-style의 주요 용도
사실 대부분의 경우 normal 키워드는 브라우저 기본값이기 때문에 굳이 선언할 필요가 없습니다. 그래서 font-style 속성의 실질적인 주 용도는 글자를 이탤릭체로 만들어 텍스트를 강조하는 것입니다.
단락에 강조 효과를 주기 위해 하나의 문단을 이탤릭체로 바꿔 보겠습니다.
p.par {
font-family: 'Indie Flower';
font-style: italic;
}
'Indie Flower' 폰트를 확인해 보면 regular(normal) 스타일만 존재하고 별도의 이탤릭 서체는 없습니다. 그럼에도 화면에서는 글자가 기울어져 보이는데, 이는 브라우저가 자체적으로 글자를 기울이는 효과(synthetic italic)를 적용했기 때문입니다. 즉, 폰트 파일에 이탤릭 서체가 없어도 브라우저가 임의로 기울여 표시해 줍니다.
마무리
font-style 속성은 font-family와 밀접하게 연관되어 있습니다. 선택한 폰트에 어떤 스타일 변형(variant)이 포함되어 있는지에 따라 실제 렌더링 결과가 달라지기 때문입니다. 또한 oblique 키워드의 브라우저 지원이 더 개선되기 전까지는, 이 속성의 핵심 활용처는 역시 italic을 적용해 텍스트를 강조하는 것이라고 할 수 있습니다.