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