font-smoothing 仅 safari 支持，firefox 完全忽略，chrome/edge 110+ 已移除解析；真正跨浏览器有效的是 text-rendering 和 font-optical-sizing。
font-smoothing 在哪些浏览器上根本没用
font-smoothing 是 WebKit 内核专属的非标准属性，只在 Safari 和旧版 Chrome/Edge（基于 Blink 但早期沿用了 WebKit 前缀）中生效。Firefox 完全忽略它，现代 Chrome（110+）、Edge（110+）也已移除对 -webkit-font-smoothing 的支持——不是失效，是直接不解析。你写上去不会报错，但开发者工具里连这个声明都看不到。
常见错误现象：-webkit-font-smoothing: antialiased 在新 Chrome 里毫无效果，却误以为是写法或权重问题反复调试。
- 仅 Safari（macOS/iOS）仍完整支持
-webkit-font-smoothing - Firefox 使用自己的渲染策略，不响应任何
font-smoothing相关声明 - Chrome/Edge 自 2023 年起默认启用 subpixel AA（次像素抗锯齿），且不再暴露控制开关
替代方案：用 text-rendering 和 font-optical-sizing 控制可读性
真正跨浏览器影响字体清晰度与可读性的，是标准属性 text-rendering 和 font-optical-sizing。它们不“强制平滑”，而是告诉浏览器：当前文本更看重速度、精度，还是美观。
典型使用场景：中文正文需要高可读性，英文代码字体需字符分明，图标字体要边缘锐利。
-
text-rendering: optimizeLegibility：启用字距调整（kerning）和连字（ligatures），适合小字号正文，但可能轻微拖慢渲染 -
text-rendering: geometricPrecision：保持字体轮廓几何精度，适合 SVG 文本或数据可视化标签 -
font-optical-sizing: auto：让可变字体自动适配字号缩放（如 Inter、IBM Plex），提升不同尺寸下的清晰度；不支持该特性的字体则无影响
示例：
body {
text-rendering: optimizeLegibility;
font-optical-sizing: auto;
}
系统级干扰：macOS 的字体平滑开关会覆盖 CSS
macOS 系统设置里的「字体平滑」开关（位于「系统设置 → 辅助功能 → 显示 → 字体平滑」）拥有最高优先级。即使 CSS 设置了 -webkit-font-smoothing: subpixel-antialiased，只要系统关闭了字体平滑，Safari 也会强制降级为灰阶抗锯齿——文字发虚、细节模糊。
这不是 bug，是设计使然：WebKit 尊重系统可访问性策略。
- 开发时务必在「系统开启字体平滑」前提下测试 Safari 表现
- 用户反馈“文字模糊”时，先确认其 macOS 是否禁用了字体平滑
- 没有 CSS 方式能绕过该系统级限制
真正有效的清晰度优化往往不在 CSS 层
字体渲染清晰度的瓶颈，常出在字体文件本身和加载方式上。CSS 只是最后一环的微调。
- 优先选用支持
font-display: swap的现代字体（如 Google Fonts 提供的 v2 链接），避免 FOIT 导致的临时空白或回退字体模糊 - 确保字体文件包含完整的 hinting 信息（尤其 Windows 下 TrueType 字体），否则 ClearType 渲染质量下降
- 避免用
transform: scale(1.01)或backface-visibility: hidden强制触发 GPU 渲染——可能让文字边缘出现细微光晕，反而更糊
最常被忽略的一点：font-size 不是越大越清楚。13px–16px 是多数中文字体在 macOS 上的黄金区间；低于 12px，即使开了 subpixel AA，笔画也会因像素不足而粘连。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
