font-smoothing 在高分屏上为什么经常失效
因为现代浏览器（尤其是 Chrome 和 Safari）对 font-smoothing 的支持早已被更底层的渲染策略接管——它只在 macOS 上对非 WebKit 渲染路径（如旧版 Electron 或某些 WebView）有点用，Windows 和 Linux 下基本被忽略。你看到的“颜色锯齿”，本质是 subpixel rendering 被禁用或 fallback 到 grayscale 后的灰阶模糊，不是抗锯齿开关没开。
真正起作用的是 -webkit-font-smoothing 和 text-rendering 组合
这两个属性才是实际影响高分屏文字边缘渲染的关键，但它们的行为差异大、平台敏感性强：
-
-webkit-font-smoothing: antialiased强制关闭子像素渲染，用灰阶抗锯齿——文字变细、边缘发虚，但颜色不会偏紫/绿（常见于浅色背景上的深色文字） -
-webkit-font-smoothing: subpixel-antialiased（默认值）启用子像素渲染，在 LCD 屏上提升清晰度，但若缩放比例非整数（如 125%、150%），容易出现彩色边缘锯齿 -
text-rendering: optimizeLegibility会触发字体特性（如 ligatures、kerning），间接影响字形拼接处的像素对齐，有时反而加重毛边
示例：在 macOS + Chrome 下，body { -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; } 可缓解彩色边缘，但小字号下可读性下降明显。
color-mix() 和透明度叠加会放大锯齿感
高分屏下，任何涉及半透叠加的操作（比如 rgba(0,0,0,0.8) 文字盖在浅灰背景上）都会让 subpixel 渲染失效，退化为 grayscale 模式，导致边缘模糊+色偏同时出现。这不是 bug，是渲染管线的必然结果。
立即学习“前端免费学习笔记（深入）”；
- 避免用
rgba()控制文字透明度；改用color配合预设灰阶（如#333→#666） - 慎用
backdrop-filter或opacity包裹文本容器——它们会让整个图层离屏渲染，彻底丢失 subpixel 信息 - CSS 变量动态改色时，确保最终值是不带 alpha 的十六进制或 named color，避免运行时解析出 rgba 中间态
真正可靠的方案其实是绕过渲染层
当设计允许时，把易出锯齿的文字内容转为 SVG 或静态图片（@2x/@3x），由系统图像渲染器处理——它不走 font stack，也不受 CSS 渲染管线干扰。这对 logo 文字、固定标语、图标内嵌文字最有效。
如果必须用纯 CSS，唯一稳定的做法是：固定缩放为 100%，禁用用户缩放（user-scalable=no），并接受 subpixel 渲染在非整数缩放下的固有缺陷。高分屏的“颜色锯齿”，本质上是硬件像素排布和软件渲染假设不匹配的结果，不是调一个 CSS 属性就能根治的。
