否fǒu否pǐ是唯一合规写法，因多音字必须拆分为多个独立单元，每个仅含一个确定读音，确保语音合成、屏幕阅读与CSS样式精准控制。
多音字必须拆成多个 <ruby></ruby> 单元，每个单元只对应一个读音；不能在一个 <ruby></ruby> 里塞多个拼音或用斜杠分隔。
为什么 <ruby>否<rt>fǒu/pǐ</rt></ruby> 是错的
这种写法会让语音合成器无法判断该读哪一个，屏幕阅读器可能跳过整个注音，CSS 也无法对两个声调分别着色或缩放。语义上它表达的是“一个字对应一个模糊读音”，而非“同一字形在不同语境下有不同确定读音”。
常见错误还包括：
- 用空格或中文顿号分隔，如
<rt>cháng 、 zhǎng</rt>—— 浏览器会把空格/标点当字符渲染，导致注音错位 - 把多音字整个包进一个
<rb></rb>再配多个<rt></rt>，如<ruby><rb>长</rb><rt>cháng</rt><rt>zhǎng</rt></ruby>—— 这违反“一对一”映射原则，部分浏览器（尤其是 Safari）会忽略第二个<rt></rt> - 依赖 JavaScript 动态切换
<rt></rt>内容但没同步更新aria-label或data-pinyin—— 对键盘用户和屏幕阅读器不友好
<ruby></ruby> + 多个并列单元是唯一合规方案
标准做法是把每个读音单独封装为一个 <ruby></ruby>，靠上下文或交互提示区分。例如“重”字在“重量”和“重复”中读音不同，应写作：
立即学习“前端免费学习笔记（深入）”；
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<ruby>重<rp>(</rp><rt>zhòng</rt><rp>)</rp></ruby>量 <ruby>重<rp>(</rp><rt>chóng</rt><rp>)</rp></ruby>复
要点：
- 每个
<ruby></ruby>必须包含且仅包含一个基字（<rb></rb>可省略，但建议显式写出以提升可读性） -
<rp></rp>成对出现，紧邻<rt></rt>，兼容旧环境 - 拼音用 Unicode 声调符（如
zhòng），不用数字标调（如zhong4），避免字体支持问题 - 若需视觉提示（如“点击切换读音”），应在外部加
<span class="pinyin-toggle"></span>包裹整组<ruby></ruby>，而不是往<ruby></ruby>内部塞按钮
动态生成时最容易崩的三个地方
用 Python（pypinyin）、JavaScript（pinyin-pro）或模板引擎批量加注时，结构断裂比样式错位更致命。
- 字符串拼接漏转义：比如
v-html="`<ruby>${char}<rt>${pinyin}</rt></ruby>`"中char含&或，会导致 HTML 解析失败甚至 XSS - 输入含组合字符或 emoji：如「ḿ」（m + ◌́）被当两个字符处理，
pypinyin.lazy_pinyin()返回长度不匹配，<rb></rb>和<rt></rt>数量对不上 - React/Vue 组件中插入 Fragment 或条件语句：如
<ruby><rb>长</rb>{isChang ? <rt>cháng</rt> : <rt>zhǎng</rt>}</ruby>——<rt></rt>不再是<ruby></ruby>的直接子节点，语义丢失
CSS 微调多音字注音的关键控制点
纯靠 HTML 结构只能保证语义正确，要让多音字注音在视觉上可区分，得靠 CSS 精准干预：
- 给不同读音的
<rt></rt>加 class：<rt class="tone4">hào</rt>，再设.tone4 { color: #e74c3c; font-size: 0.6em; } - 轻声用
data-tone="light"标记：<rt data-tone="light">men</rt>，配合rt[data-tone="light"] { font-size: 0.55em; opacity: 0.7; } - 禁用
position: absolute拉偏注音位置——它会切断与基字的排版关联，响应式断点下极易错位 - 横排注音统一用
rt { writing-mode: horizontal-tb; }，避免竖排页面里拼音跑右边
真正难的不是写对第一个字，而是确保整段文本里每个字都经过人工校验或词典兜底——自动标注工具对“阿房宫”“单于”“叶公好龙”这类专有名词几乎必然出错。
