ruby 标签不依赖特定字体就能形成注音结构，显示是否稳定却由字体决定。同一段标记换一套字体系，注音可能从对齐变成错位甚至塌陷，问题多数出在 rt 这一层。
四类字体的表现
| 字体类型 | 注音表现 | 处理建议 |
|---|---|---|
| 系统中文字体（PingFang SC、Noto Sans CJK、Microsoft YaHei） | 宽度与基线稳定 | 直接使用 |
| 西文字体（Arial、Helvetica） | rb 与 rt 基线不一致，注音偏移 | 显式指定中文字体族 |
| 等宽字体 | 字符宽度失配，注音容易塌陷 | 注音区域不用等宽字体 |
| 自托管子集字体 | 缺 CJK 字形时注音缺失 | 补全字形或回退系统字体 |
rt 层的加固写法
ruby rt {
font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
font-size: 12px;
line-height: 1;
}
ruby {
ruby-align: center;
ruby-position: over;
}
rt 的字号写成固定像素值，避免继承父级的 em 单位在不同层级标题里放大幅度不一。竖排场景改用 ruby-position 的 under 或 inter-character 取值，并与 writing-mode 一同目检。
结构与兜底
<ruby>
汉字
<rp>(</rp><rt>hanzi</rt><rp>)</rp>
</ruby>
rp 面向不认识 ruby 的老浏览器，用括号把注音包起来。结构缺失比样式偏差更影响可读性，这一层不要省。
验收清单
- 至少三套字体系下目检一次注音位置；
- 长词发生断行时注音跟随不脱节；
- 禁用 JavaScript 后结构不散；
- 打印样式保留注音，不被打印 CSS 抹掉；
- 字号写死在 rt 上，不使用继承值。