-webkit-font-smoothing在chrome 120+和firefox中已失效，因其被浏览器弃用；macos与windows字体渲染差异源于底层技术不同，应改用text-rendering、font-optical-sizing等标准属性优化。
-webkit-font-smoothing 在 Chrome 120+ 和 Firefox 中已失效，不是你写错了，是浏览器根本不再读这个声明。现代 Chromium（Chrome、Edge）从 v115 起逐步废弃该属性，v120 后多数渲染路径直接忽略；Firefox 从未支持 -webkit-font-smoothing，font-smooth 也早在 CSS 规范中被标记为废弃。
为什么 macOS 看起来“柔”、Windows 看起来“硬”
这不是 CSS 能统一的事——macOS 用 Core Text + subpixel antialiasing（子像素抗锯齿），默认让字体边缘带彩色过渡，视觉更饱满；Windows 用 DirectWrite / GDI，默认 grayscale（灰度抗锯齿），边缘无色差但更细、对比更强。两者底层渲染管线不同，-webkit-font-smoothing 在 Windows 上压根不触发任何逻辑。
-
-webkit-font-smoothing: antialiased在 macOS Safari 里会让字体变细、发虚，尤其对PingFang SC或Noto Sans CJK这类中文字体，小字号下可读性明显下降 - 加了
transform: scale(1.001)或translateZ(0)试图“强制硬件加速”来唤醒该属性？Chrome 120+ 不买账，反而可能引入 subpixel 渲染异常，导致文字边缘半透明、模糊 - 全局在
body上设-webkit-font-smoothing: antialiased，容易被框架样式（如 React 组件内联 style、CSS-in-JS 的高权重规则）覆盖，DevTools 里常显示为 “invalid”
真正跨平台可控的替代方案
放弃“一刀切”的抗锯齿控制，转向标准属性组合 + 字体层适配：
- 删掉所有
-webkit-font-smoothing和-moz-osx-font-smoothing声明——它们现在只增加维护成本，不解决实际问题 - 对英文为主、小字号场景，用
text-rendering: optimizeLegibility：它不改抗锯齿，但会启用连字（ligatures）和更精细的字距调整，间接提升清晰感 - 若使用可变字体（如
Inter、Roboto Flex），务必加font-optical-sizing: auto：它让字体根据当前font-size自动切换光学尺寸设计，比任何抗锯齿 hack 都更有效 - 避免
font-weight: normal，改用具体数值（如450或500）：Windows 下normal常被映射为粗体 hinting，导致文字糊成一团
遇到“文字突然变模糊”的紧急排查点
如果你刚升级 Chrome 到 120+ 或 Edge 124+，页面文字莫名发虚，优先检查这几处：
- 是否还残留
-webkit-font-smoothing: antialiased？立刻删掉——这是最常见诱因 - 是否用了非可变字体却强行设了
font-optical-sizing: auto？无效且可能干扰渲染 - 是否在深色背景上用了浅灰文字（如
#aaa）并叠加了text-rendering: optimizeLegibility？部分字体 hinting 在低对比下会退化，建议改用更实的灰度（如#888） - 是否启用了
font-display: optional且 fallback 字体（如 Windows 的Segoe UI）本身 hinting 较弱？可临时切为swap对比验证
字体渲染没有银弹。系统级差异无法靠一行 CSS 抹平，关键在放弃“强制统一”，转而接受各平台默认行为，再用标准属性做轻量、局部、有依据的增强——尤其是 font-optical-sizing 和具体 font-weight 值，这两个点最容易被跳过，却是当前最稳的杠杆。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
