CSS文本渲染在不同操作系统差异_使用font-smoothing平滑化

-webkit-font-smoothing 在 macOS 和 Windows 上表现不一致，因依赖系统渲染机制：macOS 默认 subpixel 抗锯齿更柔，Windows 用 grayscale 更硬；该属性仅 WebKit 有效，且受 font-weight、transform 等限制，全局设置易失效，推荐结合 -moz-osx-font-smoothing、text-rendering: optimizeLegibility 和 translateZ(0) 提升跨平台可读性。font-smoothing 在 macOS 和 Windows 上表现不一致font-smoothing 不是标准 CSS 属性，它只在 WebKit 内核浏览器（Chrome、Safari）中部分生效，且行为依赖操作系统底层渲染机制。macOS 启用 subpixel antialiasing，默认更“柔”，Windows 则倾向 grayscale，字体边缘更硬、更细。-webkit-font-smoothing: antialiased 会让 macOS 放弃 subpixel，转为灰度抗锯齿，字形变细、对比变强，但可能降低可读性-webkit-font-smoothing: subpixel-antialiased 是 macOS 默认值，不可在 Windows 上触发任何效果font-smooth（旧 Firefox）和 text-rendering 都不能跨平台统一控制像素级渲染逻辑为什么加了 -webkit-font-smoothing 还是没变化？常见原因是选择器权重不足或被后续规则覆盖，尤其在使用 CSS-in-JS 或框架默认样式时。另一个关键点：该属性仅对非 font-weight: bold 或非 transform: scale() 的文本生效——一旦有这些，WebKit 会自动回退到系统默认渲染策略。检查 computed styles 中 -webkit-font-smoothing 是否真的 applied，而不仅是 declared避免在 body 或全局重置里写，优先作用于具体文本容器（如 .article-content）不要和 backface-visibility: hidden 或 will-change: transform 同时用，它们会干扰渲染管线替代方案：用 text-rendering + font-feature-settings 控制可读性比起强行“平滑”，更稳妥的做法是引导浏览器用更保守的渲染路径。text-rendering: optimizeLegibility 在多数现代浏览器中能激活连字和更精细的字距调整，对中文影响小，但对英文/数字明显提升清晰度；配合 font-feature-settings: "liga" 可进一步稳定字形。text-rendering: geometricPrecision 适合图标字体或 SVG 文本，但会让普通文本发虚text-rendering: auto 是默认值，在 Chrome/Firefox 中实际行为不一致，不建议显式设置对中文字体，font-feature-settings 几乎无效，别白费劲真正起效的最小实践组合没有银弹，但下面这段 CSS 在 Chrome/macOS、Edge/Windows、Firefox/Linux 上实测最接近“一致可读”： Adobe Image Background Remover Adobe推出的图片背景移除工具