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.
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.
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: 这样的断点变体,以便只在中等屏幕尺寸及以上应用该工具:
<p class="antialiased md:subpixel-antialiased ...">
Lorem ipsum dolor sit amet...
</p>
在 变体文档 中了解更多关于使用变体的信息。