ruby 标签必须与 rt 配对使用才能渲染注音，单独使用无效；推荐逐字包裹 ruby+rt 以提升可访问性；rp 提供不支持时的括号兜底；需用 css 显式控制字体、行高和对齐。
ruby 标签不是“加个标签就能用”的简单工具，它必须和 rt 配合，否则浏览器不会渲染注音效果，甚至可能被忽略。
必须配对使用 rt，否则注音不显示
单独写 <ruby>汉</ruby> 是无效的。浏览器只识别完整结构：ruby 包裹原字，rt 紧跟其后并包裹拼音或假名。
-
<ruby>汉<rt>hàn</rt></ruby>✅ 正确，拼音出现在“汉”上方 -
<ruby>汉</ruby><rt>hàn</rt>❌ 错误，rt脱离ruby无意义 -
<ruby>汉字<rt>hàn zì</rt></ruby>✅ 支持多字共用一个rt，但语义上建议按字拆分（见下条）
多字注音要不要每个字都套一次 ruby？
取决于语义需求：读音是否逐字对应、是否需要独立选中或样式控制。
- 逐字注音（推荐）：
<ruby>汉<rt>hàn</rt></ruby><ruby>字<rt>zì</rt></ruby>—— 可访问性更好，屏幕阅读器能分别播报 - 整词注音：
<ruby>汉字<rt>hàn zì</rt></ruby>—— 简洁，但拼音与单字对齐可能偏移，尤其在小字号或窄容器中 - 混合场景（如“重庆”）：
<ruby>重<rt>chóng</rt></ruby><ruby>庆<rt>qìng</rt></ruby>，避免误读为“zhòng qìng”
rp 标签不是可有可无的装饰
rp 的作用是兜底：当浏览器完全不支持 ruby 时，把括号内容作为纯文本 fallback 显示。它不参与现代渲染，但影响降级体验。
- 正确写法：
<ruby>你<rp>(</rp><rt>nǐ</rt><rp>)</rp></ruby> - 不支持
ruby的老浏览器会显示：“你(nǐ)” - 主流浏览器（Chrome/Firefox/Safari/Edge）直接忽略
rp内容，只渲染rt - 省略
rp不报错，但降级后只剩裸拼音，可能造成语义断裂（比如“你nǐ”连在一起）
CSS 控制注音位置和字体容易被低估
默认情况下，rt 文字尺寸偏小、行距紧凑，且不同浏览器默认值不一致（Safari 偏高，Firefox 偏低）。必须用 CSS 显式干预。
- 基础调整：
ruby { line-height: 1.8; } rt { font-size: 0.6em; letter-spacing: 0.05em; } - 避免注音被截断：给父容器设
line-height或min-height，尤其在移动端小屏 - 不要用
position: absolute覆盖原生布局逻辑，会破坏可访问性和响应式行为 - 测试重点：iOS Safari（旧版对
ruby的vertical-align处理不稳定）
真正麻烦的不是写法，而是拼音数据来源、多音字处理、以及在 CMS 或 Markdown 中如何批量注入 ruby 结构——这些环节一旦没设计好，前端再规范也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
