Font Rasterization Lab

为什么字体仍然用 px，也不会因为 DPR 变得突兀？

保持 CSS 字号不变，提高物理像素采样密度：字的视觉尺寸基本不变，但轮廓会获得更多细节。

字体与边框追求的不是同一个目标

字体的目标是可读的视觉尺寸。例如 font-size: 16px 描述的是 CSS 布局中的字号；在 DPR=2 或 3 的屏幕上，浏览器用更多物理像素栅格化相同大小的字形，因此通常会更清晰。

这不代表真实设备上的 16 CSS px 永远严格等于某个固定毫米数。操作系统缩放、浏览器缩放、屏幕尺寸和观看距离都可能影响最终感知。

CSS 字号不变 物理采样增加 → 轮廓更细腻

每张卡片里的字母占据相同的展示面积。演示故意关闭平滑缩放并放大像素格，方便观察低分辨率到高分辨率的变化。

普通屏 · 采样点较少

演示栅格8 × 8

Retina 屏 · 轮廓更完整

演示栅格16 × 16

高密度屏 · 细节更丰富

演示栅格24 × 24

如何读图：三个字母的 CSS 展示尺寸相同。DPR 越高，浏览器可用于描绘斜线、弧线和字腔的物理采样点越多，所以视觉结果是“更清晰”，而不是“字号变成三倍”。

关键不在于都写了 px，而在于设计目标不同。

普通 1 CSS px0.5px 缩放示意

如果设计明确要求接近一个物理像素，就要根据 DPR 使用小数边框或伪元素缩放。普通组件描边仍可直接使用 1px。

16px 正文 32px 标题

DPR 增加时，字号的 CSS 视觉尺寸保持稳定，额外物理像素用来改善字形轮廓，不需要按 DPR 反向缩小。

DPR 适配 解决像素密度与栅格精度问题，典型对象是 hairline 和位图资源。

响应式字体 解决视口或容器大小变化，常用 rem 与 clamp()。

可访问性 正文优先使用 rem 更容易尊重用户字号偏好；这与 DPR 是两条独立维度。