标签是HTML原生支持中文注音的最靠谱方案，需严格按结构书写，拼音用小写无调，注意浏览器兼容性与CSS渲染细节。
用
HTML 原生支持中文注音， 就是专为这个设计的，不是靠 CSS 模拟或 JS 插件。它能保证语义正确、屏幕阅读器可读、打印时也保留标注，而且主流浏览器（Chrome/Firefox/Safari/Edge）都支持。
关键不是“能不能加”，而是怎么写才不被浏览器忽略——很多人写了 却没生效，其实是结构错了。
-
必须包裹（读音），顺序不能颠倒 - 多音字要逐字处理，不能把整句台词塞进一个
- 拼音用小写、不带声调符号更稳妥（比如
hua而非huā），避免某些字体缺失导致渲染异常
示例：台词“他行（xíng）不行（háng）？”要拆成：
<p>他<ruby><rb>行</rb><rt>xíng</rt></ruby>不<ruby><rb>行</rb><rt>háng</rt></ruby>？</p>
遇到 ruby 不显示？先查这三件事
常见现象是代码写了，但拼音没显示出来，大概率是以下某个环节出问题：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 父容器设置了
font-size: 0或line-height过小，导致被挤没——加一句ruby { line-height: 1.2; }通常就能救回来 - 用了简写标签如
- 在 Vue/React 等框架里直接写
，但模板编译器把它当普通标签过滤了——改用v-html或dangerouslySetInnerHTML渲染字符串
多音字标注别硬套词典读音，得看上下文
戏剧台词的读音不是查《现代汉语词典》就完事的。比如“数”字：
- “数一数二”里的第一个“数”读
shǔ（动词），第二个读shù（名词） - 但演员可能按方言或表演节奏读成
shuò（如“数见不鲜”），这时就得按实际演出标注，而不是“标准音” - 如果同一角色反复念同一个多音字，但每次语境不同（比如“发”在“出发”和“发面”中），建议用 class 区分：
...，方便后期统一调整 CSS 样式
移动端 Safari 对 ruby 的兼容细节容易翻车
iOS 15+ 支持完整 ，但老版本（尤其是 iOS 14 及更早）会把 当普通文本叠在字上，甚至错位。临时解法只有两个：
- 加媒体查询降级：用
@supports not (ruby-position: over)检测，不支持时改用span+position: relative模拟（仅限纯展示场景） - 如果项目必须兼容 iOS 13，干脆放弃
，改用 ARIA 属性：行，至少让 VoiceOver 能读出来
真正麻烦的是排版对齐—— 在 Safari 上默认偏右，加 ruby { text-align: center; } 也没用，得单独写 rt { text-align: center; } 才生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
