CSS font-stretch 속성이란?
HTML 요소의 글꼴 폭을 조절하려면 CSS의 font-stretch 속성을 사용합니다. 이 속성은 글자를 가로 방향으로 압축하거나 확장하여 텍스트의 시각적 인상을 조정할 수 있게 해줍니다.
font-stretch 속성에 사용할 수 있는 값은 다음과 같습니다.
- normal — 기본 글꼴 폭
- wider / narrower — 상속된 값보다 넓게 또는 좁게
- ultra-condensed — 가장 극단적으로 압축된 형태
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded — 가장 극단적으로 확장된 형태
font-stretch 사용 예제
아래 예제는 인라인 스타일로 ultra-expanded 값을 적용하여 문단의 글꼴 폭을 최대한 확장한 모습입니다.
<html>
<head>
</head>
<body>
<p style = "font-stretch:ultra-expanded;">
If this doesn't appear to work, it is likely that your computer doesn't have a
condensed or expanded version of the font being used.
</p>
</body>
</html>주의 사항: 글꼴 지원 여부 확인하기
위 코드를 실행했는데도 글꼴 폭이 변하지 않는다면, 사용 중인 컴퓨터에 해당 글꼴의 압축(condensed) 또는 확장(expanded) 버전이 설치되어 있지 않기 때문일 가능성이 높습니다.
font-stretch는 글꼴 자체가 여러 폭 변형(variant)을 포함하고 있어야 정상적으로 작동합니다. 따라서 의도한 대로 표시되지 않는 경우 다음을 확인해 보세요.
- 시스템에 해당 글꼴의 다양한 폭 버전이 설치되어 있는지 확인
- Arial, Helvetica 등 폭 변형을 지원하는 글꼴로 교체하여 테스트
- 웹폰트를 사용할 경우, 여러 폭을 지원하는 가변 폰트(variable font)를 활용
이처럼 font-stretch 속성을 활용하면 별도의 이미지나 추가 도구 없이 CSS만으로 텍스트의 가로 폭을 유연하게 조절할 수 있습니다.