타이포그래피
font-smoothing
엘리먼트의 폰트 스무딩을 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
antialiased | -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; |
subpixel-antialiased | -webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto; |
예제
그레이스케일 안티앨리어싱
antialiased 유틸리티를 사용해 그레이스케일 안티앨리어싱으로 텍스트를 렌더링할 수 있습니다:
The quick brown fox jumps over the lazy dog.
<p class="antialiased ...">The quick brown fox ...</p>서브픽셀 안티앨리어싱
텍스트를 서브픽셀 안티앨리어싱으로 렌더링하려면 subpixel-antialiased 유틸리티를 사용하세요:
The quick brown fox jumps over the lazy dog.
<p class="subpixel-antialiased ...">The quick brown fox ...</p>반응형 디자인
접두사 -webkit-font-smoothing 그리고 -moz-osx-font-smoothing 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<p class="antialiased md:subpixel-antialiased ..."> <!-- ... --></p>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
