ruby标签专为东亚文字发音标注设计，不可用于英文IPA音标；否则导致语义错误、可访问性退化及浏览器渲染不可靠，应改用abbr+aria-label或span+CSS模拟。
ruby 标签不是为英文音标设计的，强行用它标注 IPA 或 DJ 音标会导致语义错误、可访问性退化、浏览器渲染不可靠——别这么干。
为什么 ruby 不该用于英文音标
HTML 的 ruby 是专为东亚文字（汉字、假名、谚文）的**发音标注**定义的语义结构。它的核心契约是：一个基字（rb）对应一个读音（rt），且该读音必须是该字在本地语言中的标准发音形式。
英文单词的国际音标（IPA）或传统注音（如 /ˈkæt/）不满足这个契约：
-
ruby会强制把音标当作“上标注音”处理，屏幕阅读器可能跳过、误读，或把 /kæt/ 当成独立字符串播报，而非“cat 的发音” - Chrome 和 Firefox 对非东亚文字的
rt渲染行为不一致：有的压字、有的截断、有的忽略ruby-position - 搜索引擎和文本提取工具不会将
rt内容识别为“该词的发音”，语义链断裂
替代方案：用 abbr + aria-label 更稳妥
给英文单词加音标，本质是“解释缩写或特殊读法”，abbr 才是语义正确的标签。配合 ARIA，能兼顾可访问性与视觉提示：
立即学习“前端免费学习笔记（深入）”；
<abbr title="pronounced /kæt/" aria-label="cat, pronounced /kæt/">cat</abbr>
优势包括：
- 所有主流屏幕阅读器都会朗读
aria-label中的完整说明 - 鼠标悬停显示
title，无需 JS - 完全兼容 IE11 及旧版 WebView
- 服务端渲染安全，无 XSS 风险（不像拼接
ruby字符串）
如果非要视觉上“像 ruby”，用 CSS 模拟更可控
真有排版需求（比如教材 PDF 导出、印刷稿预览），可用 span + CSS 实现类似效果，同时保留语义：
<span class="ipa-label">cat<span class="ipa" aria-hidden="true">/kæt/</span></span>
CSS 示例：
.ipa-label { position: relative; }
.ipa {
position: absolute; top: -1.2em;
font-size: 0.7em; line-height: 1;
font-family: "Charis SIL", "Doulos SIL", sans-serif;
}
注意点：
-
aria-hidden="true"确保音标不被重复朗读（主文本已含单词） - 字体必须包含 IPA 字符集，推荐使用开源字体如 Charis SIL
- 避免用
vertical-align: super—— 在不同字号下对齐漂移严重
真正容易被忽略的是：音标不是装饰。它承担发音指导功能，优先级永远是「能否被正确读出来」，而不是「看起来像不像教科书」。用错标签，第一个受影响的就是听障用户或语音交互场景。
