-webkit-font-smoothing: antialiased 仅在 macos/ios 的 webkit 浏览器（safari、chrome、edge）中生效，windows/linux 完全忽略；其效果受系统渲染机制、字体支持、text-rendering 设置及 gpu 加速等多重因素影响。
为什么 -webkit-font-smoothing: antialiased 有时没效果
它只在 macOS 和 iOS 的 WebKit 内核浏览器（Chrome、Safari、Edge）中生效，Windows 和 Linux 完全忽略这个属性。如果你在 Windows 上调试却盯着这个声明调，注定白忙——系统级字体渲染机制不同，-webkit-font-smoothing 在那里压根不解析。
常见错误现象：font-smoothing 写成 font-smoothing（拼错）、加了 !important 但父元素有 text-rendering: optimizeLegibility 覆盖、或字体本身不支持亚像素渲染（比如某些粗体 icon font）。
- 仅对 macOS Safari/Chrome 有效；Firefox 不支持该属性（用
font-feature-settings或系统级设置间接影响） - 必须配合
font-weight和font-family合理取值，比如font-weight: 400比700更容易触发平滑 - 如果页面启用了
transform: translateZ(0)或will-change: transform，可能强制 GPU 渲染，反而绕过亚像素抗锯齿
-webkit-font-smoothing 的三个合法值怎么选
它不是“开/关”开关，而是三种渲染策略的切换：none（关闭子像素）、subpixel-antialiased（默认，依赖系统）、antialiased（灰度抗锯齿）。关键区别在于是否使用 RGB 子像素做混色。
macOS 默认是 subpixel-antialiased，文字更锐利但边缘带彩边；设为 antialiased 后边缘变灰、稍软，适合浅色背景+细字体，但小字号（如 12px）可能显得发虚。
-
antialiased：适合深色背景、或需要统一灰度质感的设计（如设计系统文档） -
subpixel-antialiased：保留系统默认行为，兼容性最稳，别轻易覆盖 -
none：几乎不用，文字会明显发虚，仅用于调试对比
示例写法：
.text { -webkit-font-smoothing: antialiased; }
和 text-rendering 混用时谁说了算
text-rendering 是 CSS Level 3 标准属性，控制的是字体选择与渲染优先级，而 -webkit-font-smoothing 是 WebKit 私有层的渲染方式开关。两者不冲突，但有隐式耦合。
比如设了 text-rendering: optimizeLegibility，浏览器会倾向启用连字、微调字距，此时若同时设 -webkit-font-smoothing: antialiased，部分字体（如 Inter、SF Pro）可能因字形 hinting 策略变化，导致抗锯齿实际表现弱于预期。
-
optimizeSpeed可能禁用抗锯齿优化，优先保证渲染快 -
geometricPrecision保持字形比例，但对小字号抗锯齿无增强 - 生产环境建议只在必要场景（如标题、品牌文案）单独设置
-webkit-font-smoothing，避免全局污染
真正影响文字清晰度的，往往不是这个属性
很多人调了半天 -webkit-font-smoothing，结果发现文字还是发毛，问题常出在更底层：字体文件本身缺少 hinting 数据、CSS 中 line-height 过小导致行内盒挤压、或用了 transform: scale(0.99) 这类触发像素对齐失败的操作。
尤其注意高清屏（Retina）下，如果字体未提供 @2x 字形或使用了 font-display: swap 导致回退到系统字体，-webkit-font-smoothing 就成了无源之水。
- 优先检查字体加载状态：
document.fonts.check('16px "Inter"') - 避免在
body上全局设置该属性，改用 class 精确控制（如.hero-text） - 小字号（≤14px）慎用
antialiased，macOS 下易糊；可搭配font-weight: 500+letter-spacing: 0.2px补偿
抗锯齿不是滤镜，它依赖字体、系统、DPI、渲染管线共同作用。调这个属性前，先确认你面对的是字体渲染问题，而不是布局塌陷或缩放失真。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
