字体清晰度与细度优化
使用 CSS 控制字体渲染，让文字更清晰、更细
问题
如何用 CSS 让页面字体变清晰、变细？特别是在 iOS 手机浏览器上。
解答
使用 -webkit-font-smoothing
这是 WebKit 内核浏览器（Safari、iOS 浏览器）的专有属性，用于控制字体的抗锯齿渲染方式。
body {
/* 关闭抗锯齿，字体边缘锐利 */
-webkit-font-smoothing: none;
/* 默认值，使用次像素渲染 */
-webkit-font-smoothing: subpixel-antialiased;
/* 抗锯齿，让字体变细变清晰（推荐） */
-webkit-font-smoothing: antialiased;
}配合 Firefox 使用
body {
/* WebKit 内核（Chrome、Safari、iOS） */
-webkit-font-smoothing: antialiased;
/* Firefox on macOS */
-moz-osx-font-smoothing: grayscale;
}完整示例
<!DOCTYPE html>
<html>
<head>
<style>
/* 全局字体优化 */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* 可选：优化文本渲染 */
text-rendering: optimizeLegibility;
}
/* 对比效果 */
.default {
-webkit-font-smoothing: auto;
}
.smooth {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
</head>
<body>
<p class="default">默认渲染：字体较粗</p>
<p class="smooth">优化渲染：字体更细更清晰</p>
</body>
</html>-webkit-font-smoothing 属性值
| 值 | 效果 |
|---|---|
none | 关闭抗锯齿，字体有锯齿感 |
subpixel-antialiased | 默认值，次像素渲染，字体较粗 |
antialiased | 灰度抗锯齿，字体变细变清晰 |
关键点
-webkit-font-smoothing: antialiased是让字体变细变清晰的关键属性- 该属性仅在 macOS 和 iOS 的 WebKit 浏览器上有效
- Firefox 需要配合
-moz-osx-font-smoothing: grayscale使用 - 在深色背景上效果更明显，浅色背景上差异较小
- Windows 系统上这些属性无效，因为 Windows 使用不同的字体渲染机制
目录