폰트 스무딩
폰트 스무딩 (Font Smoothing)
텍스트 렌더링 시 글꼴 안티앨리어싱(antialiasing) 방식을 정해 주는 유틸리티예요. 그레이스케일 방식 또는 서브픽셀 방식으로 글자를 더 부드럽게 보이게 할 수 있어요.
출처: 문서
본문
클래스 & 스타일 (Class Styles)
antialiased
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
subpixel-antialiased
-webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;
그레이스케일 안티앨리어싱 (Grayscale antialiasing)
antialiased 유틸리티를 사용하면 그레이스케일 안티앨리어싱으로 텍스트를 렌더링할 수 있어요.
The quick brown fox jumps over the lazy dog.
<p class="antialiased ...">The quick brown fox ...</p>
서브픽셀 안티앨리어싱 (Subpixel antialiasing)
subpixel-antialiased 유틸리티를 사용하면 서브픽셀 안티앨리어싱으로 텍스트를 렌더링할 수 있어요.
The quick brown fox jumps over the lazy dog.
<p class="subpixel-antialiased ...">The quick brown fox ...</p>
반응형 디자인 (Responsive design)
-webkit-font-smoothing과 -moz-osx-font-smoothing 유틸리티에 md: 같은 브레이크포인트 variant를 붙이면 중간(medium) 화면 크기 이상에서만 유틸리티를 적용할 수 있어요.
<p class="antialiased md:subpixel-antialiased ...">
Lorem ipsum dolor sit amet...
</p>
variant 사용에 대해 더 자세히 알고 싶다면 variants 문서를 확인해 보세요.