HTML中无法原生标注多音字声母韵母分离格式，需手动拆解拼音并用配合CSS微调，但受字体渲染、浏览器兼容性和语境读音影响，难以完全闭环。
HTML里没有原生多音字拼音标注标签
直接用 <ruby></ruby> 标注多音字时，浏览器默认只支持整字拼音（如“长”标成“cháng”或“zhǎng”），不拆分声母韵母。想显示“ch-áng”或“zh-ǎng”这种格式，得手动拆解、绕过浏览器的自动排版逻辑。
用 <ruby></ruby> + <rt></rt> 手动拼接声母和韵母
核心思路是放弃让浏览器自动切分，自己把声母、韵母、声调拆成独立文本块，用空格或短横线连接，再塞进 <rt></rt>。注意：必须禁用默认的 ruby 对齐行为，否则声调位置会错乱。
-
<ruby>长<rt>ch-áng</rt></ruby>是最简写法，但“-”只是视觉分隔，不是标准拼音规范 - 若需更精确控制（比如声母右对齐、韵母左对齐），得用
<rb></rb>和<rtc></rtc>配合 CSS，但兼容性差（Safari 16.4+ 才支持<rtc></rtc>） - 避免在
<rt></rt>里嵌套<span></span>—— 多数屏幕阅读器会忽略嵌套内容，影响可访问性
JavaScript 动态注入声母韵母需谨慎
有人想用 JS 查字典 API 自动拆分“长”→“ch/áng”，但实际落地问题多：
- 拼音库（如
pinyin-pro）默认输出完整拼音，getFirstLetter()只给声母，“áng”这种带声调的韵母得自己正则提取，容易漏掉轻声或儿化音 - 同一汉字在不同词中读音可能变化（如“和”在“和平”读“hé”，在“和诗”读“hè”），纯字级标注无法覆盖语境
- 服务端预渲染比客户端 JS 注入更可靠 —— 否则首屏看不到拼音，SEO 也抓不到
CSS 微调声调位置常被忽略
即使写了 <rt>ch-áng</rt>，iOS Safari 仍可能把声调“´”压在“a”上而不是“á”整体上。这是因为字体本身对组合字符（U+0301）渲染不一致。
立即学习“前端免费学习笔记（深入）”；
- 加
font-feature-settings: "liga" off;可禁用连字，减少声调偏移 - 用 Unicode 预组合字符（如
áU+00E1）比用á更稳妥，但得确认字体支持 - 别依赖
ruby-align: center—— 它对多段式拼音（如“ch-áng”）无效，老老实实用letter-spacing或margin微调
