타이포그래피
font-weight
엘리먼트의 폰트 두께를 조절하는 유틸리티입니다.
| Class | Styles |
|---|---|
font-thin | font-weight: 100; |
font-extralight | font-weight: 200; |
font-light | font-weight: 300; |
font-normal | font-weight: 400; |
font-medium | font-weight: 500; |
font-semibold | font-weight: 600; |
font-bold | font-weight: 700; |
font-extrabold | font-weight: 800; |
font-black | font-weight: 900; |
font-(<custom-property>) | font-weight: var(<custom-property>); |
font-[<value>] | font-weight: <value>; |
예제
기본 예제
font-thin과 font-bold 같은 유틸리티를 사용해 엘리먼트의 글꼴 두께를 설정할 수 있습니다:
font-light
The quick brown fox jumps over the lazy dog.
font-normal
The quick brown fox jumps over the lazy dog.
font-medium
The quick brown fox jumps over the lazy dog.
font-semibold
The quick brown fox jumps over the lazy dog.
font-bold
The quick brown fox jumps over the lazy dog.
<p class="font-light ...">The quick brown fox ...</p><p class="font-normal ...">The quick brown fox ...</p><p class="font-medium ...">The quick brown fox ...</p><p class="font-semibold ...">The quick brown fox ...</p><p class="font-bold ...">The quick brown fox ...</p>커스텀 값 사용하기
font-[<value>] 구문을 사용하세요 font weight를 완전히 커스텀한 값으로 설정하려면:
<p class="font-[1000] ..."> <!-- ... --></p>CSS 변수를 사용하려면 font-(<custom-property>) 구문을 사용할 수도 있습니다:
<p class="font-(--my-font-weight) ..."> <!-- ... --></p>이는 font-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.
반응형 디자인
접두사 a font-weight 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<p class="font-normal md:font-bold ..."> <!-- ... --></p>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
테마 커스텀하기
--font-* 테마 변수를 사용해 프로젝트에서 font weight 유틸리티를 커스터마이징할 수 있습니다:
@theme { --font-extrablack: 1000; }이제 font-extrablack 유틸리티를 마크업에서 사용할 수 있습니다:
<div class="font-extrablack"> <!-- ... --></div>테마 커스터마이징에 대해 더 알아보려면 테마 문서를 참고하세요.
