ruby标签本身不依赖特定字体，但注音显示是否正常取决于字体对东亚字符宽度、基线及上标区域的支持；系统中文字体（如PingFang SC、Noto Sans CJK）表现稳定，而西文字体或等宽字体易致rt错位甚至塌陷，需显式声明rt的font-family并设固定像素字号（如12px）以确保兼容。
ruby标签在不同字体下是否显示正常
ruby本身不依赖特定字体，但注音效果是否清晰、位置是否偏移，高度取决于字体对东亚字符宽度、基线（baseline）和上标区域的支持。系统默认中文字体（如“PingFang SC”“Noto Sans CJK”“Microsoft YaHei”）通常表现稳定；而西文字体（如“Helvetica”“Arial”）或等宽字体（如“Fira Code”“JetBrains Mono”）用于ruby时，rt极易错位甚至垂直塌陷——因为它们缺乏对ruby-position: over所需字形度量的支持。
- 测试发现：用
"Segoe UI"显示汉字+拼音时，rt常整体下移2–3px，需额外加rt { vertical-align: text-top; }校正 -
"Noto Sans JP"和"Source Han Serif"对假名注音支持最完整，rt自动居中且字号缩放比例自然 - 禁用
font-family全局继承到rt：显式声明rt { font-family: "PingFang SC", "Hiragino Kaku Gothic Pro", sans-serif; }，避免父级西文字体污染
font-size设为百分比时rt文字被截断或偏移
这是最常被忽略的兼容陷阱：rt的默认字号由浏览器按基文字x-height推算，而非简单继承父级font-size。设font-size: 70%在Chrome可能缩得过小导致截断，在Safari则可能因计算逻辑不同而上下浮动。
- 唯一可靠做法是给
rt设固定像素值，例如rt { font-size: 12px; line-height: 1; } - 若需响应式，改用
clamp(10px, 1.2vw, 14px)替代百分比，避开浏览器对rt的特殊缩放规则 - 不要对
ruby本身设font-size——它不传递给rt，反而可能干扰基文字渲染
Android WebView和旧版iOS Safari中ruby显示异常
虽然Chrome 5+/Firefox 38+/Edge 12+支持良好，但Android 4–9的WebView（基于旧版Chromium）和iOS 12及更早Safari存在两个典型问题：一是rt完全不显示；二是rp括号重复出现（即“(hàn)(hàn)”）。
- 检测支持性可用
typeof CSS.supports !== 'undefined' && CSS.supports('ruby-position', 'over')，不支持时降级为<span class="ruby-fallback">汉<span class="rt">(hàn)</span></span> - 避免在
rt内使用em、rem单位——旧引擎无法解析其相对于基文字的基准 - iOS 13+已修复大部分问题，但部分定制ROM仍沿用Android 7 WebView内核，建议在
rt上加transform: translateZ(0)强制触发硬件加速以减少重绘丢失
自定义字体（WOFF2）加载后ruby注音错位
当使用@font-face引入第三方中文字体（如“HarmonyOS Sans SC”或“OPPO Sans”）时，rt常出现横向偏移或与基文字脱节。根本原因是字体文件未嵌入完整的OpenType ruby特性表（rbdf或trak），导致浏览器无法正确计算注音锚点。
立即学习“前端免费学习笔记（深入）”；
- 优先选用明确标注“支持Ruby注音”的字体，例如Google Fonts上的
Noto Sans CJK系列（其WOFF2含完整trak表） - 若必须用自定义字体，可在
ruby外层加display: inline-flex; align-items: flex-start;，再用rt { margin-left: -2px; }手动微调 - 禁止对
ruby设letter-spacing——它会同步作用于基文字和rt，造成相对位置紊乱
