字体清晰度与细度优化

使用 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 使用不同的字体渲染机制