CSS로 글꼴 변형 설정하기
웹 페이지에서 글꼴 변형(font variant)을 설정하려면 CSS의 font-variant 속성을 사용합니다. 이 속성의 대표적인 값은 small-caps와 normal 두 가지입니다.
small-caps 값은 텍스트를 스몰캡(small caps) 형태로 표시합니다. 즉, 모든 글자가 대문자처럼 보이되, 원래 대문자는 일반 대문자 크기로, 소문자는 그보다 약간 작은 대문자 형태로 렌더링됩니다. 반면 normal 값은 기본 글꼴 형태를 유지합니다.
font-variant: small-caps 적용 예제
아래 코드를 실행하면 CSS의 font-variant 속성을 small-caps로 설정한 결과를 직접 확인할 수 있습니다.
<html>
<head>
</head>
<body>
<p style = "font-variant:small-caps;">
This text will be rendered as small caps
</p>
</body>
</html>위 예제에서 문단에 인라인 스타일로 font-variant: small-caps;가 지정되어 있으므로, 해당 텍스트는 스몰캡 형태로 화면에 출력됩니다.
참고 사항
font-variant 속성은 주로 영문 텍스트에서 효과적이며, 한글에는 스몰캡 개념이 없어 시각적인 변화가 나타나지 않을 수 있습니다. 또한 최신 CSS에서는 font-variant-caps, font-variant-ligatures 등 더 세분화된 하위 속성들도 제공되므로, 필요에 따라 함께 활용하면 좋습니다.