-webkit-font-smoothing在Chrome 120+/Edge 124+中已不解析，Safari 17+仅在特定条件下响应，Firefox完全忽略；应改用text-rendering: optimizeLegibility和font-optical-sizing: auto替代，并确保font-family回退链完整、@font-face多格式兼容且font-display: swap启用。
别再碰 -webkit-font-smoothing 了——它在 Chrome 120+ 和 Edge 124+ 中已彻底不解析，Safari 17+ 仅在无 transform、系统字体平滑开启、且 font-weight 严格匹配字重时才可能响应，Firefox 完全忽略。
用 text-rendering 和 font-optical-sizing 替代抗锯齿控制
现代浏览器不再响应“平滑开关”，但会认真处理语义化渲染提示：
-
text-rendering: optimizeLegibility启用连字（ligature）和精细字距（kerning），对英文/数字可读性提升明显；中文无副作用，可安全全局设置 -
font-optical-sizing: auto必须搭配含opsz轴的可变字体（如 Inter、Roboto Flex、PingFang SC），根据font-size自动切换光学尺寸设计，比任何 hack 更底层、更稳定 - 避免
text-rendering: geometricPrecision：它禁用所有字形优化，普通文本会发虚，只适合 SVG 图标文字
写对 font-family 回退链，而不是只写 -apple-system
单独声明 -apple-system 在 Windows/Linux 下直接被跳过，最终回退到 Times New Roman 或浏览器默认 serif 字体：
- 正确顺序应分层覆盖平台：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "PingFang SC", "Microsoft YaHei", sans-serif; -
"PingFang SC"和"Microsoft YaHei"必须加英文双引号，漏掉引号会被拆成两个无效字体名 - 表单控件（
input、textarea、button）默认不继承body的font-family，需显式重置：input, textarea, button { font-family: inherit; }
确保 @font-face 多格式兼容 + font-display: swap
字体加载失败或格式不支持，是跨浏览器显示不一致的主因之一：
立即学习“前端免费学习笔记（深入）”；
- 必须提供至少
woff2（现代首选） +woff（兼容旧 Safari/IE）双格式，老 IE 还需eot -
font-display: swap是关键：避免 FOIT（空白闪动），让文本先用系统字体渲染，字体加载完成后再替换 - 检查 DevTools → Fonts 面板，确认真实加载的是哪个字体文件、对应字重是否匹配；
font-weight: normal在 Windows 上常映射为粗 hinting 导致糊团，改用具体数值如450或500更可控
删掉所有 -webkit-font-smoothing 和 -moz-osx-font-smoothing
这些声明现在只增加维护成本，不解决实际问题，还可能干扰渲染管线：
- Chrome 120+ / Edge 124+ 的 DevTools 中常显示为
invalid或根本不出现，声明存在但不参与光栅化流程 - 加
transform: scale(1.001)或backface-visibility: hidden想“强制触发”？WebKit 反而自动降级，连建议都不听了 - 排查“文字突然变模糊”的第一件事：打开 DevTools → 查找所有
-webkit-font-smoothing声明并删除
最易被忽略的点是：字体渲染差异往往不是单一 CSS 属性的问题，而是 @font-face 加载、font-family 回退、font-weight 匹配、系统设置四者共同作用的结果。验证时别只看 macOS Safari，务必在 Windows Chrome、Linux Firefox、iOS Safari 模拟器中分别打开「Computed」面板，逐项确认生效的字体名和字重来源。
