-webkit-font-smoothing: antialiased强制关闭子像素渲染，改用灰阶抗锯齿，导致文字边缘泛灰、发虚，在浅色背景上易显紫/绿残影；仅对macOS/iOS WebKit浏览器生效。
-webkit-font-smoothing: antialiased 会让文字边缘变灰、发虚，尤其在浅色背景上容易显出紫/绿偏色——这不是颜色值写错了，而是子像素渲染被强制关闭后，RGB通道混色逻辑失效导致的视觉偏差。
为什么 -webkit-font-smoothing: antialiased 会改变文字颜色观感
它不是调色，是切换了底层渲染路径：antialiased 强制禁用 subpixel rendering，改用 grayscale 抗锯齿。系统不再利用 LCD 屏的红绿蓝子像素做边缘插值，而是统一用灰阶过渡。结果就是：深色文字在浅底上边缘泛灰，而原本靠子像素“借色”显得锐利的部分，现在变成中性灰，对比度下降，肉眼容易误判为“颜色变淡”或“偏紫/偏绿”（其实是残留 subpixel 残影未完全清除）。
- 只在 macOS/iOS WebKit 浏览器生效（Safari、Chrome、Edge），Windows/Linux 完全忽略该声明
- 对
@font-face加载的中文字体影响最明显；系统字体如 San Francisco 不受影响 - 若同时设了
text-rendering: optimizeLegibility，可能触发连字等高级特性，反而加重灰阶过渡的“软边”感
background-clip: text 渐变文字出现彩色锯齿的真正原因
这不是字体平滑没开，而是 alpha 通道采样方式冲突：background-clip: text 本质是把渐变背景裁进文字的透明度蒙版，而高分屏下若未启用 subpixel 抗锯齿，这个蒙版边缘就是单倍采样+灰阶 fallback，导致渐变色块与文字轮廓错位，出现阶梯状断层和色边。
- 必须三者共存才有效：
text-rendering: optimizeLegibility+-webkit-font-smoothing: antialiased+backface-visibility: hidden -
backface-visibility: hidden是关键——它触发 GPU 合成层，避免 CPU 渲染时亚像素对齐漂移 - 如果用了
opacity或rgba()文字色，整个图层会离屏渲染，background-clip: text直接失效
Firefox 下字体发虚且 CSS 抗锯齿无效怎么办
火狐开启 WebRender 后，-webkit-font-smoothing 和 -moz-osx-font-smoothing 全部失效——WebRender 绕过了 CSS 字体渲染控制链，直接走系统级字体管线。
立即学习“前端免费学习笔记（深入）”；
- 先确认 about:support 中“合成器”显示为
WebRender，否则以下操作无意义 - 访问 about:config，把
gfx.webrender.subpixel-antialiasing.enabled设为false - 再把
gfx.font_rendering.cleartype_params.rendering_mode设为1（灰度模式） - 配合 CSS：
text-rendering: optimizeLegibility+-moz-osx-font-smoothing: grayscale
真正稳定不翻车的颜色处理方案
所有 CSS 字体抗锯齿属性都是平台/内核/缩放比强耦合的妥协方案，没有“一设永逸”。想彻底规避颜色偏移，就得绕过字体渲染管线本身。
- 固定缩放为 100%，禁用
user-scalable，接受 subpixel 渲染在非整数缩放下的固有缺陷 - 对 logo、标语等静态文字，优先转成 SVG 或 @2x/@3x PNG —— 图像渲染器不走 font stack，无 subpixel 干扰
- CSS 变量动态改色时，确保最终值是
#rrggbb或命名色，避免运行时解析出rgba()中间态
高分屏的颜色锯齿，本质是硬件像素排布和软件渲染假设不匹配的结果。调一个属性能缓解，但不能根治——你得先决定是要清晰度，还是要颜色一致性。
