能用，但需严格遵循结构语义规则：必须成对使用rb与rt，rb显式包裹基字、rt紧随其后；Safari对rb支持弱，常需display: ruby-base修复对齐；多音字须依实际读音标注，不可照搬字典。
用 ruby 标签最直接，但浏览器支持有差异
HTML 原生支持注音的标签就是 ruby，它专为东亚文字的发音标注设计，语义清晰、可访问性好。但要注意：Chrome 和 Firefox 支持完整（包括 rb、rt、rp），而 Safari 对 rb 的支持较弱，有时需手动指定 display: ruby-base 才能正确对齐。
常见错误是把拼音写在 rt 里却漏掉 rb——比如写成 <ruby><rt>zhāng</rt></ruby>，这样拼音会悬浮无依附，渲染错位。正确结构必须成对：
<ruby> <rb>张</rb> <rt>zhāng</rt> </ruby>
多音字人名要按实际读音选拼音，不能照字典罗列
给“长”姓注音时，若此人姓 Cháng（如导演长泽雅美中的“长”实为日文汉字，但中文人名中“长”作姓氏读 Cháng），就不能标 zhǎng；同理，“乐”姓读 Yuè，不是 Lè。注音本质是语音服务，不是字义解释。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先查证本人公开读音（如央视报道、本人视频、权威媒体报道）
- 不确定时，用《现代汉语词典》中“用于姓氏”的读音项，而非第一个读音
- 避免用
title属性或纯 CSS 模拟注音——屏幕阅读器无法识别，也不符合语义
ruby 在表格或行内文本中容易换行错位
当 ruby 出现在 <td> 或连续文本流中，部分浏览器（尤其是旧版 Edge 和 Safari）会把 <code>rt 渲染成块级、导致整行撑高或断行。这不是 bug，而是规范允许的排版行为。
缓解方式：
- 给
ruby加style="ruby-position: under;"强制下标式显示（兼容性略好于默认的 over） - 在
rt上加style="font-size: 0.6em; line-height: 1;"控制尺寸和基线 - 若需严格等宽对齐（如名单表格），考虑用
grid模拟 ruby 布局，但会丢失语义和可访问性
移动端微信内置浏览器对 ruby 支持不一致
微信 iOS 客户端（WKWebView）基本支持 ruby，但 Android 版（X5 内核）常忽略 rt 样式，拼音变小却不居中，甚至叠在字上。这不是前端能完全解决的问题。
务实做法：
- 对关键人名（如会议主持、嘉宾介绍），额外加一个
span包裹拼音并设font-size: 75%; opacity: 0.85;作为降级显示 - 避免在
ruby外层套transform或flex，X5 内核易触发渲染异常 - 测试时务必真机打开微信，仅靠 Chrome 模拟设备不可靠
真正麻烦的不是怎么标，而是“谁来确认这个‘华’字在‘华春莹’里读 huà 而不是 huá”——注音的前提是读音确定，技术只是表达工具。
