폰트 스트레치

폰트 스트레치 (Font Stretch)

글꼴 페이스의 너비(굵기와는 다른, 가로 확장폭)를 정해 주는 유틸리티예요. 압축된(condensed) 형태부터 확장된(expanded) 형태까지 폰트의 폭을 세밀하게 조절할 수 있어요.

출처: 문서

본문

클래스 & 스타일 (Class Styles)

font-stretch-ultra-condensed font-stretch: ultra-condensed; /* 50% */

font-stretch-extra-condensed font-stretch: extra-condensed; /* 62.5% */

font-stretch-condensed font-stretch: condensed; /* 75% */

font-stretch-semi-condensed font-stretch: semi-condensed; /* 87.5% */

font-stretch-normal font-stretch: normal; /* 100% */

font-stretch-semi-expanded font-stretch: semi-expanded; /* 112.5% */

font-stretch-expanded font-stretch: expanded; /* 125% */

font-stretch-extra-expanded font-stretch: extra-expanded; /* 150% */

font-stretch-ultra-expanded font-stretch: ultra-expanded; /* 200% */

font-stretch-<percentage> font-stretch: <percentage>;

font-stretch-(<custom-property>) font-stretch: var(<custom-property>);

font-stretch-[<value>] font-stretch: <value>;

기본 예제 (Basic example)

font-stretch-condensed, font-stretch-expanded 같은 유틸리티를 사용해 글꼴 페이스의 너비를 설정할 수 있어요.

font-stretch-extra-condensed The quick brown fox jumps over the lazy dog.

font-stretch-condensed The quick brown fox jumps over the lazy dog.

font-stretch-normal The quick brown fox jumps over the lazy dog.

font-stretch-expanded The quick brown fox jumps over the lazy dog.

font-stretch-extra-expanded The quick brown fox jumps over the lazy dog.

<p class="font-stretch-extra-condensed">The quick brown fox...</p><p class="font-stretch-condensed">The quick brown fox...</p><p class="font-stretch-normal">The quick brown fox...</p><p class="font-stretch-expanded">The quick brown fox...</p><p class="font-stretch-extra-expanded">The quick brown fox...</p>

이 기능은 여러 너비 변형을 가진 폰트에만 적용돼요. 그렇지 않은 폰트라면 브라우저가 가장 가까운 글꼴을 선택해요.

백분율 사용하기 (Using percentages)

font-stretch-50%, font-stretch-125% 같은 font-stretch-<percentage> 유틸리티를 사용하면 백분율로 글꼴 페이스의 너비를 설정할 수 있어요.

font-stretch-50% The quick brown fox jumps over the lazy dog.

font-stretch-100% The quick brown fox jumps over the lazy dog.

font-stretch-150% The quick brown fox jumps over the lazy dog.

<p class="font-stretch-50%">The quick brown fox...</p><p class="font-stretch-100%">The quick brown fox...</p><p class="font-stretch-150%">The quick brown fox...</p>

커스텀 값 사용하기 (Using a custom value)

font-stretch-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 글꼴 너비를 설정할 수 있어요.

<p class="font-stretch-[66.66%] ...">
  Lorem ipsum dolor sit amet...
</p>

CSS 변수를 쓸 때는 font-stretch-(<custom-property>) 문법을 사용할 수도 있어요.

<p class="font-stretch-(--my-font-width) ...">
  Lorem ipsum dolor sit amet...
</p>

이것은 font-stretch-[var(<custom-property>)]의 줄임 표현이에요. var() 함수를 자동으로 추가해 주기 때문에 훨씬 편리하죠.

반응형 디자인 (Responsive design)

font-stretch 유틸리티에 md: 같은 브레이크포인트 variant를 붙이면 중간(medium) 화면 크기 이상에서만 유틸리티를 적용할 수 있어요.

<div class="font-stretch-normal md:font-stretch-expanded ...">
  <!-- ... -->
</div>

variant 사용에 대해 더 자세히 알고 싶다면 variants 문서를 확인해 보세요.

폰트 스트레치