高分辨率屏幕字体发虚本质是浏览器默认字体渲染过度平滑，应通过-webkit-font-smoothing: antialiased、-moz-osx-font-smoothing: grayscale和text-rendering: optimizeLegibility组合优化，并避免transform: scale()及系统字体平滑设置干扰。
字体在高分辨率屏幕（如 Retina、4K）上发虚、模糊，本质是浏览器默认的字体渲染策略未适配亚像素精度
现代高 DPI 屏幕（比如 macOS Retina、windows 125% 缩放、4K 显示器）下，font-smoothing 和 -webkit-font-smoothing 的默认值会让文字边缘“过度平滑”，反而损失清晰度。这不是 css 写错了，而是渲染引擎在权衡抗锯齿与锐度时倾向了前者。
用 -webkit-font-smoothing 和 font-smoothing 控制子像素渲染
这两个属性是解决高分屏字体模糊最直接的开关，但行为有差异：
-
-webkit-font-smoothing: antialiased：强制关闭子像素渲染，只做灰度抗锯齿 —— 文字更细、更“冷”，适合黑体类字体（如"Helvetica Neue", "Segoe ui"） -
-webkit-font-smoothing: subpixel-antialiased：启用子像素渲染（默认值），在 LCD 屏上最清晰，但在缩放或某些 windows 渲染路径下可能出问题 -
font-smoothing: antialiased（firefox 支持）：作用类似前者，但 Firefox 110+ 已弃用，改用text-rendering: optimizeLegibility配合
推荐组合写法（兼顾 chrome/safari/Firefox）：
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }注意：-moz-osx-font-smoothing 是 Firefox 在 macos 上的专用属性，grayscale 表示禁用子像素，和 WebKit 的 antialiased 效果一致；不要写成 auto 或留空。
立即学习“前端免费学习笔记（深入）”；
避免 transform: scale() 或缩放容器导致字体二次模糊
很多响应式方案用 transform: scale(0.8) 模拟缩放，或给 加 transform: scale(1.25) 应对系统缩放，这会让字体被 GPU 重采样，彻底丢失亚像素信息。
- 改用
viewport元标签控制初始缩放： - 用
rem或em配合html { font-size: 16px }动态调整基础字号，而不是缩放整个页面 - 若必须用
scale，加will-change: transform有时能触发更优光栅化，但不治本
字体格式与加载也会影响清晰度
即使 CSS 渲染设置正确，如果字体本身是低分辨率 TTF 或未开启 hinting，依然会糊：
- 优先使用 WOFF2 格式（压缩好 + 支持 hinting 指令）
- 确保
@font-face中指定了font-display: swap，避免 FOUT 后字体替换引发的重排重绘 - 避免在非 Retina 设备上强制加载 @2x 字体文件 —— 浏览器无法自动降级，可能直接失败
- mac 用户特别注意：系统偏好 → 显示器 → “字体平滑” 若设为“中”或“强”，会覆盖 CSS 设置，需同步关闭
真正起效的点往往藏在细节里：比如 -moz-osx-font-smoothing 拼错一个字母、font-display 写成 display、或者用了 transform: scale() 却忘了它比 zoom 更伤字体渲染精度。