不能用或标拼音，因二者无语义，屏幕阅读器跳过、搜索引擎忽略，且无法对齐汉字基线；必须用结构，它是HTML5唯一原生支持汉字注音的语义化方案。
HTML 本身不提供多音字标注功能，必须靠 CSS + HTML 组合实现；直接写拼音会破坏语义和可访问性，别用 <sup></sup> 或 <font></font> 硬套。
为什么不能用 <sup></sup> 或纯 <span></span> 标拼音
浏览器不会把 <sup></sup> 当作拼音读出来，屏幕阅读器跳过它，搜索引擎也忽略；<span></span> 没有语义，无法被辅助技术识别为注音。更麻烦的是：中文排版中拼音需要对齐汉字基线、控制字间距、适配不同字号——这些都得靠 CSS 精确控制。
常见错误现象：
– 拼音飘在汉字上方偏右，像贴纸一样突兀
– 手机上拼音和汉字错位、重叠或换行错乱
– 复制文字时拼音一起被复制，粘贴后格式全崩
- 必须用
<ruby></ruby>+<rt></rt>结构，这是 HTML5 唯一原生支持汉字注音的语义化标签 -
<ruby></ruby>包裹汉字，<rt></rt>放拼音，<rp></rp>是兼容 fallback（老浏览器显示括号） - 不要手动写“zhòng（重）”，那是退化成文本标注，失去结构价值
<ruby></ruby> 的最小可用写法与浏览器兼容底线
最简合法结构长这样：
立即学习“前端免费学习笔记（深入）”；
<ruby>重<rt>zhòng</rt></ruby>
它在 Chrome/Firefox/Safari/Edge（2021+）里默认渲染正常，但 iOS Safari 15.4 之前有 vertical-align bug，Android WebView 旧版本可能忽略 <rt></rt> 样式。所以必须加一行兜底 CSS：
- 给
<rt></rt>设font-size: 50%; line-height: 1; letter-spacing: .05em; - 用
ruby-align: center;确保拼音居中对齐汉字 - 加
ruby-position: over;明确指定拼音在上方（部分安卓需此声明）
完整最小样式建议塞进 里：
style {
ruby { display: ruby; }
rt { font-size: 0.5em; line-height: 1; letter-spacing: .05em; ruby-align: center; ruby-position: over; }
rp { display: none; }
}
批量处理多音字时，别手敲 <ruby></ruby>
人工给每个多音字加 <ruby></ruby> 效率极低，且容易漏掉嵌套场景（比如“重”在“重复”和“重要”里读音不同）。实际项目中应：
- 先用 Python 脚本或在线工具（如 HanLP、Pypinyin）自动标音，导出带
<ruby></ruby>的 HTML 片段 - 用正则批量替换：匹配中文字符后紧跟的括号拼音，转成
<ruby>字<rt>pīnyīn</rt></ruby></li> <li>注意保留原始空格和换行——<code><ruby>
内部不能有换行符，否则某些浏览器会插入空白 - 若内容来自 CMS 或 Markdown，优先在渲染层（如 Jekyll 插件、Vue 组件）封装
rubyize()函数，而非硬编码
移动端和字体缩放下的真实表现差异
同一段 <ruby></ruby> 在桌面 Chrome 和 iPhone Safari 上，拼音高度、字间距、基线对齐可能完全不同。这不是 bug，是各引擎对 CSS Ruby 属性支持程度不同导致的。
关键影响点：
- iOS Safari 不支持
ruby-position: under（下方注音），只认over - 安卓部分定制浏览器（如华为浏览器）会忽略
ruby-align，需用transform: translateY(-.3em)微调 - 用户放大字体到 200% 时，
<rt></rt>的font-size: 0.5em可能太小，建议改用rem或媒体查询单独设断点 - 思源黑体、霞鹜文楷等开源中文字体对 Ruby 渲染更友好，微软雅黑在旧 Win 系统上易出现拼音偏移
上线前务必在真机上测三类场景：系统字体放大、深色模式开启、横屏切换——这些都会触发 Ruby 排版重计算，而模拟器往往测不出来。
