ruby标签核心作用是提供语义化发音标注，必须配合rb和rt使用以确保浏览器、屏幕阅读器和打印引擎准确识别发音与汉字的绑定关系；单独使用或省略rb/rt会导致注音失效、错位或无障碍支持丧失。
ruby 标签不是为了“加拼音好看”，而是让浏览器、屏幕阅读器和打印引擎明确知道：**这段小字是某个汉字的发音，且必须与该字严格绑定**。不用它，就只剩视觉效果，语义丢失，无障碍失效，响应式排版也容易崩。
不加 ruby 会怎样？直接拼字符串最常见
很多人写成：<p>汉字<span class="pinyin">hàn zì</span></p>——表面能看，但问题一堆：
- 屏幕阅读器读作“汉字hàn zì”，无法区分哪个音对应哪个字
- 缩放字体时，
span不会自动上标、缩放，拼音可能压字或飘走 - 打印 PDF 或导出为 EPUB 时，注音常被当成普通文本换行错位
- CSS 无法精准控制“第2个字上方的拼音”样式（
ruby支持ruby-align、ruby-position等语义化定位）
ruby 必须配 rb + rt 才算真正生效
只写 <ruby>汉<rt>hàn</rt></ruby> 在 Chrome 115+、Safari 17.4+ 已被降级处理，拼音可能贴在右侧、被截断，甚至不渲染。原因很简单：
-
rb是基字锚点，没有它，rt就失去对齐依据 -
rt必须是ruby的直接子元素，不能嵌套在span或换行符后 - 多字必须拆开：
<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby>，不能合并成一个rt
加了 rp 才算真正兼容老环境
不加 rp，IE11、Outlook 桌面版、部分邮件客户端会把拼音平铺在汉字后面，变成“重庆chóng qìng”，完全不可读。正确写法是：
<ruby><rb>重</rb><rp>(</rp><rt>chóng</rt><rp>)</rp></ruby>
现代浏览器隐藏 rp，只显示拼音；老环境则退化为“重(chóng)”，语义完整、可读性强。
CSS 干预要克制，别用 position: absolute 强拉位置
有人用 rt { margin-top: -0.6em } 或 position: absolute 模拟上标，结果一换字体、一缩放、一切换竖排，拼音就偏移失准。真正可靠的是：
-
ruby { ruby-position: over; }（显式声明位置，触发原生排版引擎） -
rt { font-size: 0.65em; line-height: 1; }（固定比例缩放，避免各浏览器默认值打架） - 禁用
vertical-align和visibility: hidden——降级后拼音直接消失，且破坏 TTS 朗读
ruby 在 iOS Safari 上的微小字间距异常。这不是 bug，是字体度量差异导致的渲染偏差，需要用父容器 font-size: 0 + 子元素重设字号来收敛。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
