能，但必须用多个ruby并列包裹同一个汉字，每个对应一种读音；不能在一个ruby内塞多个rt，否则第二个rt会被忽略或错位。
ruby 能不能给一个字加多个拼音（如多音字）？
能，但必须用多个 ruby 并列包裹同一个汉字，每个对应一种读音；不能在一个 ruby 里塞多个 rt。
浏览器只认「一个基字 + 一个 rt」的最小语义单元。写成 <ruby>长<rt>cháng</rt><rt>zhǎng</rt></ruby> 是无效的——第二个 rt 会被忽略或渲染错位。
正确做法是：复制AI写代码
<ruby>长<rp>(</rp><rt>cháng</rt><rp>)</rp></ruby><ruby>长<rp>(</rp><rt>zhǎng</rt><rp>)</rp></ruby>
- 两个
ruby共享同一个汉字“长”，视觉上紧挨着，用户可自行识别为多音选项 - 必须配
rp，否则旧浏览器会显示“长cháng长zhǎng”，破坏可读性 - 如果想强调主次（如默认读 cháng，括号内标 zhǎng），靠 CSS 控制
ruby:nth-of-type(2)的 opacity 或 font-size 即可
如何让多音字注音在一行内紧凑显示？
默认情况下，连续多个 ruby 容易因行内元素间隙或字体度量差异出现字间距不均，尤其在 iOS Safari 中更明显。
立即学习“前端免费学习笔记（深入）”；
关键不是调 letter-spacing，而是重置 ruby 的 display 行为和基线对齐：
- 强制声明
ruby { display: ruby; }，避免 Safari 把它当普通 inline 处理 - 加
ruby { line-height: 1; }消除因rt行高撑开导致的垂直松散 - 对多音字组外层加
span并设font-size: 0; letter-spacing: -0.15em;，内部再把字体恢复（防止空格吃掉）
示例结构：
<span class="polyphone"><ruby>行<rp>(</rp><rt>xíng</rt><rp>)</rp></ruby><ruby>行<rp>(</rp><rt>háng</rt><rp>)</rp></ruby></span>
CSS：
.polyphone { font-size: 0; letter-spacing: -0.15em; }<br>.polyphone ruby { font-size: 1rem; }
为什么不能用 CSS 伪元素（::before/::after）动态加多音？
因为 ruby 是语义容器，不是样式钩子；::before 插入的内容不会被浏览器识别为 rt，也就不会触发注音渲染逻辑。
你写 ruby[data-pinyin="xíng"]::before { content: "xíng"; }，结果只是普通文本叠在汉字上，既不缩放、不上标、也不随字体缩放适配，更无法被屏幕阅读器识别为发音信息。
- 所有注音内容必须真实存在于 DOM 中，且严格嵌套在
rt标签内 - 动态生成多音需靠 JS 预处理：比如用
pinyin-pro库查出多音列表，再拼出对应数量的ruby片段 - 服务端渲染更稳妥——前端 JS 在弱网或禁用环境下可能延迟甚至失败，而
ruby结构一旦输出就稳
移动端和阅读器对多音 的支持现实吗？
不理想。iOS Safari 渲染没问题，但 VoiceOver 默认跳过所有 rt；Android TalkBack 对连续多个 ruby 的朗读顺序不稳定，有时只读第一个。
这意味着：多音标注本质是视觉辅助，不是无障碍解决方案。
- 若需保障可访问性，必须额外提供 ARIA 属性，例如：
<span aria-label="行，有 xíng 和 háng 两种读音">行</span> -
ruby+rp是 fallback 基础，但不能替代明确的语义描述 - 别依赖用户自己去“发现”多音——在上下文或词典式注释中主动说明读音适用场景（如“银行”的“行”读 háng，“行走”的“行”读 xíng）
最易被忽略的一点：多音字往往出现在特定词语中，单独标“长”有两个音，不如标“成长（zhǎng）”和“长度（cháng）”来得直接有效。
