暗色视网膜光晕与字重微调补偿
赫姆霍兹视网膜光渗效应、白字在暗底上的膨胀感知、可变字体 460/560 微调与静态字体回退陷阱。
暗色视网膜光晕与字重微调补偿
同样是 font-weight: 500 的文字,在暗色背景下往往看起来比浅色模式粗壮一圈,破坏了排版的精致感。
视网膜光渗效应(Optical Irradiation)
1867 年,生理光学先驱赫尔曼·冯·亥姆霍兹(Hermann von Helmholtz)在《生理光学手册》中指出了人眼的这一生理特性: 强光刺激视网膜感光细胞时,神经兴奋会向相邻的暗区细胞扩散,导致人脑感知到的亮区边界向外扩张。
白字在暗底上的膨胀感知
- 浅色模式(黑字白底):大面积明亮的白色背景向内侵蚀黑色的笔画边缘,字形看起来紧凑、清晰、偏细。
- 暗色模式(白字黑底):发光的白色字形向外扩散,浸润周围的暗黑背景。同样字重的笔画看起来比黑字白底时更粗;粗多少随亮度、对比度和字号而变,没有一个固定的百分比。
如果在双模式下直接复用同一套字重数值,暗色模式下的文字会显得粗重甚至油腻。
可变字体的 460/560 微调实战
TuffEx 目前没有在暗色主题里自动下调字重,组件在深浅两面用的是同一套 400/500/600。下表是建议值:字体带字重轴时(可变字体,如 San Francisco、Segoe UI Variable、Inter),可以在暗色主题里这样微调:
| 语义角色 | 浅色模式字重 | 暗色建议字重 | 视觉校准目标 |
|---|---|---|---|
| 默认正文 | 400(Regular) | 380 ~ 400 | 消除白字边缘发虚与膨胀 |
| 行内强调 | 500(Medium) | 460 | 清晰强调而不糊成一团 |
| 小标题/按钮 | 600(Semi-Bold) | 560 | 保持内腔通透,骨架挺拔 |
静态字体的回退防线
必须高度警惕的工程陷阱:如果用户操作系统缺少可变字体,回退到静态字体时:
- CSS 声明
font-weight: 460会触发浏览器的就近匹配算法。 460落在400~500区间内,会被向上就近匹配为500!- 这不仅没有减轻膨胀,反而进一步加粗了文字!
因此建议只在确认字体带字重轴时声明这些中间值;静态字体环境下维持 400/500/600 阶梯,改由降低文字颜色对比度(使用 --tx-text-color-regular 替代纯白)来抵消光渗膨胀。中文字体同样要先量:在 macOS 的中文字体下实测,390 画出来与 400 完全相同,正文这一档写了也不生效;英文的 system-ui 带字重轴,能画出中间值。
示例加载中...