폰트 피처 설정
폰트 피처 설정 (Font Feature Settings)
OpenType 기능(small caps, oldstyle numbers, tabular numbers 등)을 활성화해 주는 유틸리티예요. 폰트가 지원하는 고급 타이포그래피 기능을 세밀하게 끌어내고 싶을 때 사용해요.
출처: 문서
본문
클래스 & 스타일 (Class Styles)
font-features-[<value>]
font-feature-settings: <value>;
font-features-(<custom-property>)
font-feature-settings: var(<custom-property>);
기본 예제 (Basic example)
font-features-[<value>] 유틸리티를 사용하면 이를 지원하는 폰트에서 OpenType 기능을 활성화할 수 있어요.
<p class="font-features-['smcp'] ...">This text uses small caps.</p>
여러 기능 활성화하기 (Enabling multiple features)
여러 OpenType 기능은 쉼표로 구분해 한 번에 활성화할 수 있어요.
<p class="font-features-['smcp','onum'] ...">This text uses small caps and oldstyle numbers.</p>
CSS 변수 사용하기 (Using CSS variables)
font-features-(<custom-property>) 문법을 사용하면 CSS 변수에서 폰트 피처 설정을 가져와 적용할 수 있어요.
<p class="font-features-(--my-features) ...">
<!-- ... -->
</p>
반응형 디자인 (Responsive design)
font-feature-settings 유틸리티에 md: 같은 브레이크포인트 variant를 붙이면 중간(medium) 화면 크기 이상에서만 유틸리티를 적용할 수 있어요.
<p class="font-features-['tnum'] md:font-features-['smcp'] ...">
Lorem ipsum dolor sit amet...
</p>
variant 사용에 대해 더 자세히 알고 싶다면 variants 문서를 확인해 보세요.