font-smooth 已废弃,-webkit-font-smoothing 仅在 macos webkit 内核生效;windows/linux 忽略该属性,需依赖 font-display、font-feature-settings 和字体自身 hinting 优化;font-optical-sizing: auto 仅对含 opsz 轴的可变字体有效。

font-smooth 和 -webkit-font-smoothing 在 macOS 上失效的原因
现代浏览器里 font-smooth 已被废弃,css 规范中它不生效;真正起作用的是 -webkit-font-smoothing,但它只在 WebKit 内核(safari、旧版 chrome)的 macOS 上有实际效果,Windows 和 Linux 完全忽略。
- macOS 使用 Core Text 渲染字体,开启
-webkit-font-smoothing: subpixel-antialiased才能启用子像素抗锯齿(默认值),关掉会变模糊 -
-webkit-font-smoothing: antialiased强制灰度抗锯齿,文字更细但边缘发虚,适合深色背景或高 PPI 屏幕下避免彩色边纹 - Chrome 从 v110+ 开始默认禁用子像素渲染(受系统设置影响),即使写了
subpixel-antialiased也可能被覆盖
Windows 下 font-display 和 font-feature-settings 的实际作用
Windows 默认用 GDI 或 DirectWrite 渲染,-webkit-font-smoothing 没用,得靠字体加载策略和 OpenType 特性间接提升清晰度。
-
font-display: swap能避免 FOIT(空白闪烁),但首次渲染仍可能因字体未就绪而 fallback 到系统字体——系统字体在 Windows 上往往比 web 字体更锐利 -
font-feature-settings: "liga", "clig"等可启用连字,但对清晰度无直接帮助;真正有用的是"cv05", "ss01"这类为屏幕优化的字符变体(需字体本身支持) - 某些中文字体(如思源黑体、霞鹜文楷)在 Windows 上默认启用 hinting,但若 CSS 中写了
font-weight: 400却加载了 300 字重文件,hinting 可能失效,文字发虚
Retina 屏与普通屏共存时的 font-size 和 line-height 适配陷阱
不是所有“高清屏”都走同样的渲染路径:macOS Retina 是缩放(2x CSS 像素),Windows 高 DPI 是系统级缩放(125%、150%),两者对字体 hinting 和 subpixel 的影响完全不同。
- 用
rem+ 根元素font-size动态调整时,不要在 js 中读取window.devicePixelRatio直接乘缩放比——这会让 Windows 高 DPI 下文字过度放大,破坏行高节奏 - 更稳妥的是用
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)单独微调line-height和letter-spacing,比如 +0.02em 补偿高密度屏下的视觉紧凑感 - 避免在
@media中重设font-size主体字号,否则会触发字体重排,导致 hinting 重算失败,反而更毛边
font-optical-sizing: auto 在主流字体中的支持现状
这是目前最接近“自动适配屏幕分辨率”的原生 CSS 方案,但支持度有限,且行为不像名字那么智能。
立即学习“前端免费学习笔记(深入)”;
- 仅 Safari 16.4+、Chrome 116+、firefox 117+ 支持
font-optical-sizing: auto,且只对启用了光学尺寸轴(opsz)的可变字体有效,比如Inter Variable、IBM Plex Sans Variable - 设为
auto后,浏览器根据font-size值自动切换内部字形——小字号用更粗的 stem、更大 x-height;大字号则更纤细、细节更多。但这不改变渲染引擎本身的抗锯齿方式 - 如果你用的是静态字体(如 .woff2 封装的常规思源黑体),开这个属性完全无效,也不会报错,容易误以为起了作用
真正难处理的,是同一套 CSS 在 macOS(Core Text + subpixel)、Windows(DirectWrite + grayscaling)、Linux(FreeType + 自定义 hinting)上走三套完全不同的渲染管线——没有一行 CSS 能通吃。最稳的做法,是把字体选型、格式封装、加载时机、字号节奏全盘纳入响应式考量,而不是指望某个属性一键平滑。