Skip to content
全部文档

font-smoothing

用于控制元素字体平滑的工具类。

快速参考

属性
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.

html
<!-- [!code classes:antialiased] -->
<p class="antialiased ...">The quick brown fox ...</p>

亚像素抗锯齿

使用 subpixel-antialiased 工具类,以亚像素抗锯齿方式渲染文本:

The quick brown fox jumps over the lazy dog.

html
<!-- [!code classes:subpixel-antialiased] -->
<p class="subpixel-antialiased ...">The quick brown fox ...</p>

响应式设计

使用 md: 等断点变体前缀,即可让 -webkit-font-smoothing-moz-osx-font-smoothing 工具类仅在中等及以上屏幕尺寸下生效:

html
<p class="antialiased md:subpixel-antialiased ...">
 Lorem ipsum dolor sit amet...
</p>

变体文档中了解更多关于使用变体的信息。

文档译文以 MIT 协议授权;原文版权归 Tailwind Labs。湘ICP备2026005453号-2