ruby标签高分屏文字发虚、注音错位的根本原因是浏览器排版引擎未适配dpr且不响应devicepixelratio变化；须用整数物理像素控制rt尺寸、禁用相对单位、强制根字号取整、配合contain和媒体查询min-resolution精准干预。
ruby 标签在高分屏上文字发虚、注音错位，不是 CSS 能调出来的——根本原因是浏览器对 ruby 的排版引擎未适配 DPR，且不响应 window.devicePixelRatio 变化。
ruby 注音模糊：别碰 font-size，要锁物理像素对齐
高分屏下 ruby 内的 rt 文字边缘毛糙、偏细，常见于 macOS Safari 和 iOS Chrome。这不是字体渲染问题，而是浏览器把 1px 的 rt 行高/字间距按 CSS 像素解释，在 DPR=2 下实际只占 1 物理像素，导致亚像素截断。
- 禁止用
font-size: 0.6rem或line-height: 1.2等相对单位微调rt，它们会随 DPR 放大而失准 - 必须用整数物理像素控制关键尺寸：
rt { font-size: 12px; line-height: 12px; letter-spacing: 0; } - 配合
ruby { -webkit-text-stroke: 0.5px #000; }（仅 WebKit）可轻微增强边缘，但不能替代尺寸对齐 - 若设计稿基准是 16px 字号，
rt应固定为12px（非0.75rem），确保在所有 DPR 下都渲染为整数物理像素
ruby 与 base 文字错位：避免 transform 缩放，改用 rem + DPR 截断
当页面整体用 rem 动态缩放时，ruby 容器常出现注音漂移——rb 与 rt 垂直对不齐，尤其在 Windows 125% 缩放（DPR ≈ 1.25）下明显。这是因为 ruby 的内部对齐逻辑依赖字体度量值，而这些值在非整数 DPR 下被插值计算。
- 不要对
ruby元素用transform: scale(0.8)模拟缩小，它会放大排版误差 - JS 中动态设根字号时，强制取整：
document.documentElement.style.fontSize = Math.round(clientWidth / 7.5) + 'px'; - 给
ruby加contain: layout paint;，防止父级 flex/grid 重排干扰其内部基线对齐 - 若仍错位，用
rt { margin-top: -1px; }微调（仅限 DPR ≥ 2 场景），避免百分比或 em
ruby 在不同 DPR 下的媒体查询适配要点
@media (-webkit-min-device-pixel-ratio: 2) 对 ruby 生效有限，因为它的排版行为不触发重排；真正有效的干预点只有两个：根字号和 rt 的绝对像素值。
- Firefox 不支持
-webkit-min-device-pixel-ratio，必须补@media (min-resolution: 2dppx) - 不要在媒体查询里重写整套
ruby样式，只覆盖font-size和line-height，例如：@media (min-resolution: 2dppx) { rt { font-size: 12px; line-height: 12px; } } - 慎用
clamp()：它响应视口宽度，但不感知 DPR，clamp(10px, 0.6rem, 14px)在 DPR=1.25 下仍可能生成 11.5px 这类亚像素值 - 测试时务必用真实设备切换缩放比例（如 Windows 设置 125%/150%，iOS 控制中心调节），模拟器常忽略 DPR 变化
最易被忽略的是：ruby 的基线对齐依赖字体文件本身的 hinting 信息，Web 字体（如 .woff2）若未启用 opentype features（如 font-feature-settings: "liga", "kern"），在高 DPR 下 rt 位置抖动会更显著——这和 HTML/CSS 无关，得从字体构建环节控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
