必须用标签而非span+CSS或图片，因其原生支持可访问性、缩放对齐与无样式识别；多音字须按语境唯一标注，严禁一rt多音，且需考据读音依据。

直接用 + 标注最可靠，别用 CSS 模拟或图片——否则屏幕阅读器读不出、打印丢失、语义不明确。

为什么必须用 而不是 span + CSS

文言文试题里的多音字（如“降”在“受降城”中读 xiáng，“夫”在“夫君子之行”中读 fú）需要同时满足三个条件：可被语音合成器准确朗读、能随字体缩放保持对齐、在无样式环境下仍可识别。用 span 套两层再加 position: relative 会破坏可访问性；纯图片标注则无法复制、搜索、适配深色模式。而 是 HTML5 原生语义标签，浏览器和读屏软件默认支持其结构逻辑。

的写法必须严格一对一

多音字标注最常踩的坑是把多个读音塞进一个 ，比如写成 降jiàng/xiáng。这会让语音合成器困惑，也违背“注音即释义”原则——读音不同，语义往往不同。

• 正确写法是按上下文唯一确定读音后，只标一个：降xiáng（对应“接受投降”义）
• 若试题本身要求对比多音（如考题括号填空），应在题干文字外另加说明，例如：

  “受降xiáng城”的“降”读作______

  

  使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

  使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

  下载
• 不要用 包裹斜杠或括号——现代浏览器已无需降级，反而可能干扰朗读节奏

配合试题排版的 CSS 微调要点

默认 显示在汉字正上方，但试卷 PDF 导出或小字号印刷时容易重叠。需针对性控制：

• 缩小注音字号但不改变行高：rt { font-size: 0.65em; line-height: 1; }
• 避免拼音贴得太近汉字：ruby { line-height: 2; }（注意不是设在 rt 上）
• 若试卷为竖排（如仿古卷），需强制横排拼音：rt { writing-mode: horizontal-tb; }，否则拼音会侧躺，影响识别
• 禁用 transform: translateY() 或 margin-top 调位置——会脱离文档流，导致打印错位或响应式失准

试题系统里动态渲染多音字要防什么

如果用 JavaScript 动态插入标注（比如从 JSON 题库生成页面），注意两个边界情况：

• innerHTML 直接写 ... 可能被浏览器解析失败，建议用 document.createElement('ruby') + appendChild 构建节点
• 遇到带标点的多音字组合（如“否．极泰来”），确保 只包裹汉字本身，标点独立在外，否则标点会被一起上标
• 试卷导出为 PDF 时，某些工具（如 wkhtmltopdf）对 支持不全，建议导出前用 CSS 添加备用属性：否pǐ，供后端提取 fallback

真正难的不是写对标签，而是每个 都得经得起考据——比如“衰”在“鬓毛衰”里标 shuāi 还是 cuī，得看命题依据的是《普通话异读词审音表》还是教学传统。技术只是载体，音义判断才是不可绕过的前提。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！