타이포그래피
font-family
엘리먼트의 글꼴 패밀리를 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
font-sans | font-family: var(--font-sans); /* ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' */ |
font-serif | font-family: var(--font-serif); /* ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif */ |
font-mono | font-family: var(--font-mono); /* ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace */ |
font-(family-name:<custom-property>) | font-family: var(<custom-property>); |
font-[<value>] | font-family: <value>; |
예제
기본 예제
font-sans와 font-mono 같은 유틸리티를 사용해 엘리먼트의 폰트 패밀리를 설정할 수 있습니다:
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<p class="font-sans ...">The quick brown fox ...</p><p class="font-serif ...">The quick brown fox ...</p><p class="font-mono ...">The quick brown fox ...</p>커스텀 값 사용하기
font-[<value>] 구문을 사용하세요 font family를 완전히 커스텀한 값으로 설정하려면:
<p class="font-[Open_Sans] ..."> <!-- ... --></p>CSS 변수를 사용하려면 font-(<custom-property>) 구문을 사용할 수도 있습니다:
<p class="font-(--my-font) ..."> <!-- ... --></p>이는 font-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.
반응형 디자인
접두사 a font-family 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<p class="font-sans md:font-serif ..."> <!-- ... --></p>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
테마 커스터마이징
--font-* 테마 변수를 사용해 프로젝트에서 font family 유틸리티를 커스터마이징할 수 있습니다:
@theme { --font-display: "Oswald", "sans-serif"; }이제 font-display 유틸리티를 마크업에서 사용할 수 있습니다:
<div class="font-display"> <!-- ... --></div>폰트 패밀리에 대한 기본 font-feature-settings와 font-variation-settings 값을 제공할 수도 있습니다:
@theme { --font-display: "Oswald", "sans-serif"; --font-display--font-feature-settings: "cv02", "cv03", "cv04", "cv11"; --font-display--font-variation-settings: "opsz" 32; }필요한 경우 @font-face at-rule을 사용하여 커스텀 폰트를 로드할 수 있습니다:
@font-face { font-family: Oswald; font-style: normal; font-weight: 200 700; font-display: swap; src: url("/fonts/Oswald.woff2") format("woff2");}테마 커스터마이징에 대해 더 알아보려면 테마 문서를 참고하세요.
