ruby标签必须配rt，否则注音被忽略；多字注音须逐字独立包裹ruby+rt；rp仅用于旧浏览器fallback且内容只能是纯括号；推荐用固定像素设置rt字号并显式声明ruby-position。
ruby 标签必须配 rt，否则整个注音块被忽略
只写 <ruby>汉</ruby> 是无效的——浏览器会照常显示“汉”，但拼音完全不出现。根本原因在于 rt 是 ruby 的**必需子元素**，不是可选项。没有 rt，ruby 就像没装电池的遥控器，语法合法，但功能归零。
常见错误写法包括：
-
<ruby>汉字<rt>hàn zì</rt></ruby>（多字共用一个rt，语义错、渲染错） -
<ruby><span>汉</span><rt>hàn</rt></ruby>（rt不直接子级，被忽略） -
<ruby>汉</ruby><rt>hàn</rt>（rt脱离ruby，无效）
多字注音必须逐字独立包裹 ruby + rt
中文每个字对应独立读音，语义和渲染都要求一一映射。<ruby>汉字<rt>hàn zì</rt></ruby> 看似省事，实则在 Safari 中易因空格/换行错位，在屏幕阅读器中可能读作“汉字 hàn zì”而非“汉 hàn 字 zì”，破坏可访问性。
正确做法是：
- 每个汉字单独套一层
ruby -
rt必须紧贴其前的基字，不能跨行或夹杂空白 - 避免嵌套：不能在
ruby里再写ruby
示例：<ruby>汉<rt>hàn</rt></ruby><ruby>字<rt>zì</rt></ruby>
rp 标签只能在 rt 内部，且内容只能是纯括号
rp 的唯一作用是为不支持 ruby 的旧浏览器提供 fallback 括号（比如 IE11 或某些邮件客户端）。但它有硬约束：
- 必须出现在
rt开头或结尾，如<rt><rp>(</rp>hàn<rp>)</rp></rt> -
rp标签内**不能有任何空格、换行或非括号字符**，<rp>( </rp>或<rp>(a</rp>都会导致 fallback 失效 - Chrome 会渲染括号，Safari 默认隐藏；生产环境建议加 CSS：
rp { display: none; }，避免视觉干扰
样式控制要避开 font-size 百分比陷阱
浏览器对 rt 的默认字号计算逻辑不一致：Chrome 可能按父级 50% 算，Firefox 按 60%，结果导致注音偏高、截断或挤在一起。用 font-size: 70% 这类相对值不可靠。
更稳妥的做法：
- 用固定像素值，如
rt { font-size: 12px; } - 显式声明位置：
ruby { ruby-position: over; }（防竖排时跑到左侧） - 移除
ruby和rt内部所有多余空格与换行，防止渲染间隙
复杂点在于：注音不是纯装饰，它承担语义、可访问性和向后兼容三重责任。漏掉 rt、错放 rp、或用错字体单位，任一环节出问题，用户看到的就只是光秃秃的汉字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
