组件/设计工程概念手册/暗色视网膜光晕与字重微调补偿

暗色视网膜光晕与字重微调补偿

赫姆霍兹视网膜光渗效应、白字在暗底上的膨胀感知、可变字体 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 带字重轴,能画出中间值。

示例加载中...