直接用标注历史典籍生僻字可行，但必须逐字拆解、显式用包裹基字、手动填拼音；否则safari及旧安卓webview会忽略，导致“饕餮”等字注音不显示或错位。
直接用 <ruby></ruby> 标注历史典籍生僻字可行，但必须逐字拆解、手动填拼音、加 <rb></rb> 显式包裹基字——否则 Safari 和部分安卓 WebView 会跳过注音，或把“龘”“靐”这类字的拼音堆叠错位。
为什么 <ruby>饕餮</ruby> 不显示拼音
因为 <ruby></ruby> 是语义容器，不是自动注音工具。浏览器只识别 <rb></rb> + <rt></rt> 这一对结构；漏掉 <rb></rb>，多数现代浏览器（尤其是 Safari）会忽略整个 <rt></rt> 内容，导致“饕餮”后面空着，什么也不显示。
- 正确写法必须显式声明基字：
<ruby><rb>饕</rb><rt>tāo</rt></ruby><ruby><rb>餮</rb><rt>tiè</rt></ruby> -
<rb></rb>不可省略——它告诉浏览器“这个字才是被注音对象”，比纯文本更可靠，尤其在 iOS Safari 和旧版安卓 WebView 中 - 不支持
<ruby></ruby>的环境（如 Outlook 邮件客户端）会直接丢弃<rt></rt>，但保留<rb></rb>内文字，至少能读到原字
<rt></rt> 拼音怎么写才不翻车
历史典籍用字常含异读、古音、轻声或特殊变调，<rt></rt> 必须按实际朗读习惯写，不能照搬字典基础音。
- 多音字必须人工判断语境：比如《左传》“重耳”读
chóng ěr，不是zhòng ěr；写成<rt>chóng</rt>才对 - 轻声不标调号，但保留字母：如“了”作句末助词时写
le，不是liǎo - 声调优先用 Unicode 预组合字符（如
ā），不用组合符（ā），后者在 Safari 或某些字体下易偏移或丢失 -
<rt></rt>内禁用全角空格、中文标点、HTML 实体；拼音之间用半角空格分隔，如<rt>yīn fú</rt>，不是yīnfú
CSS 微调时最容易踩的三个坑
默认样式在 Chrome、Firefox、Safari 中差异明显：Safari 可能不缩放 <rt></rt>、不居中、甚至垂直偏移一两个像素。靠猜 margin 或 position 会彻底破坏可访问性。
- 必须重置
font-size：rt { font-size: 0.65em; }（设为百分比，适配缩放） - 禁用
vertical-align: super——它让拼音相对行高上移，而非相对于基字，换行后极易错位 - 用标准属性替代 hack：
rt { ruby-position: over; ruby-align: center; }，比margin-top: -0.4em更稳定 - 别给
<ruby></ruby>设width、display: block或overflow: hidden，否则整段注音可能被裁切或换行异常
批量处理生僻字时，JS 库怎么选
手动给《说文解字》《广韵》类文本逐字加 <rb><rt></rt></rb> 不现实，但 JS 库不能无脑套用——很多库对“彧”“龑”“忞”等扩展汉字支持弱，或默认输出数字调（yù → yu4），需额外转换。
-
pinyin-pro是目前最稳的选择，支持 Unicode 15.1+ 生僻字，html()方法直接返回带<rb></rb>和<rp></rp>的完整结构 - 调用时务必传
{ toneType: 'symbol', polyphonic: true }，否则“叶公好龙”的“叶”会固定出yè，无法根据上下文切到shè - 服务端渲染（SSR）要小心：
pinyin-pro依赖TextEncoder，Node.js 版本必须 ≥ 18，且不能在无 DOM 环境里调用html() - 别信“一键转拼音”按钮——所有库都做不到 100% 准确，尤其涉及古音、通假、异体字时，仍需人工核对
最麻烦的不是写对标签，而是每个字背后都要查证读音来源：是依《广韵》反切，还是按现代汉语规范读音，抑或保留方言训读？<ruby></ruby> 只负责呈现，不替你做学术判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
