ruby标签是专为东亚文字注音设计的语义化标签，仅适用于汉字、日文汉字、韩文汉字需添加拼音、假名或谚文等短注音的辅助阅读场景，不可用于装饰性排版。
直接说结论：ruby 标签不是“美化工具”，它是为东亚文字注音设计的语义化标签，强行用来做装饰性排版大概率导致可访问性崩坏、屏幕阅读器误读、移动端错位，甚至被搜索引擎降权。
ruby 在什么场景下必须用？
只适用于需要为汉字、日文汉字（漢字／かんじ）或韩文汉字（한자）提供短注音（如拼音、假名、谚文）的场景。核心是“辅助阅读”，不是“视觉点缀”。
- 中文教材里给生字标
<ruby><rb>中</rb><rt>zhōng</rt></ruby> - 日文网页中为「東京」加注假名：
<ruby><rb>東京</rb><rt>とうきょう</rt></ruby> - 法律条文或古籍整理中，对多音字/异读字作强制读音提示
常见错误：把 ruby 当 span 用
很多人发现 ruby 在 Chrome 里默认有上下间距，就把它当“自动居中+缩放”的样式容器，比如：
<ruby><rb>重要</rb><rt>★</rt></ruby>
这会出三个问题：
- 屏幕阅读器会把
★读作“星”，而非“重点标记”——rt内容被当作语音注音处理 - 在 Safari 或旧版 Edge 中，
rt可能不显示，或位置偏移严重 - 语义完全错乱：
ruby的 ARIA role 是annotation，不是decorative
想实现类似效果？用 CSS + aria-hidden 更稳妥
如果真需要“汉字上方小图标/符号”，推荐以下组合：
- 用
span包裹文字，再用position: relative定位伪元素或子span - 图标类内容加
aria-hidden="true"，避免干扰读屏 - 必要时用
role="img"和aria-label补充语义（例如aria-label="重点内容"）
示例结构：
<span class="annotated" aria-label="重点内容">重要<span aria-hidden="true" class="icon">★</span></span>
兼容性和渲染差异必须测
ruby 的渲染高度、行距、rt 字体大小在不同浏览器中差异明显：
- Chrome / Edge：
rt默认比rb小约 25%，且垂直居中较准 - Safari：
rt常偏高，需手动调line-height或top - Firefox：对嵌套
ruby（如多音字套注）支持弱，容易塌陷 - 所有浏览器都不支持
rt内使用display: flex或复杂布局
实际项目里，只要涉及多端适配或无障碍要求，就得在 iOS Safari 和 NVDA/JAWS 下实测 —— 光看 Chrome 效果等于没测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
