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>在变体文档中了解更多关于使用变体的信息。