---
title: 暗色视网膜光晕与字重微调补偿
description: 赫姆霍兹视网膜光渗效应、白字在暗底上的膨胀感知、可变字体 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 带字重轴，能画出中间值。

:::TuffDemoWrapper{demo="ConceptIrradiationDemo"}
:::