标注多音字须用显式绑定汉字与注音，CSS通过ruby-align和letter-spacing控制间隔，禁用空格分隔，IE等旧浏览器需降级fallback。
用 <ruby></ruby> 和 <rt></rt> 标注多音字时，音节间隔由 CSS 控制
HTML 原生不提供“音节间隔”属性，<ruby></ruby> 结构只负责语义绑定（汉字 + 注音），真正控制音节之间空隙的是 CSS 的 ruby-align 和 letter-spacing。直接写 <rt></rt> 里加空格或全角空格，会导致渲染错位或语义污染，不可取。
-
<rt></rt>内容应为连续注音（如<rt>zhòng</rt>），不插入空格、不拆音节 - 若需让每个汉字的注音横向拉开，对
<ruby></ruby>设置ruby-align: space-around或ruby-align: space-between - 若需微调单个注音内字母间距（比如让 “zhòng” 显示得更松），可对
<rt></rt>单独设letter-spacing: 0.05em，但慎用——会影响可读性和屏幕阅读器解析
<ruby></ruby> 多音字标注必须配合 <rb></rb> 显式包裹汉字
现代浏览器（Chrome 120+、Firefox 125+、Safari 17.5+）要求多字多音场景下，每个汉字和对应注音必须一一配对，否则 <rt></rt> 可能整体偏移或被截断。不写 <rb></rb>，浏览器会尝试自动分组，但对“重”“长”“行”这类多音多义字极易出错。
- 正确写法：
<ruby><rb>重</rb><rt>zhòng</rt><rb>长</rb><rt>zhǎng</rt></ruby> - 错误写法：
<ruby>重长<rt>zhòng zhǎng</rt></ruby>（注音字符串无结构，无法对齐） - 若用 JavaScript 动态生成，务必确保
<rb></rb>和<rt></rt>数量严格相等，且顺序一致
IE 和旧版 Safari 不支持 <rb></rb>，需降级 fallback
<rb></rb> 是 HTML5.2 新增标签，IE 完全不识别，Safari ≤16 会忽略它导致注音堆叠在第一个字上。不能只靠 CSS hack，必须用显式降级策略。
- 用
@supports (ruby-align: space-around)区分支持环境，在不支持时显示纯文本注音（如 “重(zhòng)长(zhǎng)”） - 避免用
<span></span>模拟<rb></rb>：CSS ruby 属性对非标准元素无效，仅视觉模拟不可访问 - 若项目必须兼容 IE，建议放弃
<ruby></ruby>，改用 aria-label + CSS positioning 手动定位注音，但需额外维护焦点和朗读逻辑
最易被忽略的一点：多音字标注不是排版问题，而是语义与可访问性问题。<ruby></ruby> 的价值在于让屏幕阅读器按字播报注音，一旦用空格、伪元素或 JS 插入分隔符，就破坏了 DOM 结构和 ARIA 遍历顺序。音节间隔只是表象，对齐精度和语音输出一致性才是关键。
立即学习“前端免费学习笔记（深入）”；
