最可靠方案是用 ruby + rt 标注地名多音字，语义正确、广泛支持且无障碍友好；须逐字包裹、禁用伪元素或 title；需查权威读音表、确保声调准确，并为老旧环境提供括号 fallback。

HTML里用 ruby 标签标注地名多音字读音最可靠

直接用 ruby + rt 是目前唯一被浏览器广泛支持、语义正确、且不影响可访问性的方案。别用 CSS 伪元素或 title 属性“模拟”，它们不被屏幕阅读器识别，也不符合 HTML5 地名标注规范。

比如“重庆”要标为“chóng qìng”，不能只写“重庆”让读者猜：

<ruby>重<rt>chóng</rt></ruby><ruby>庆<rt>qìng</rt></ruby>

• ruby 是语义容器，告诉浏览器“这是汉字+注音”的成对关系
• rt（ruby text）必须紧跟在被注音字后面，不能跨字、不能包裹多个字
• 每个字单独套一层 ruby，像“六安”就得写成 六lù安ān，合起来注会失效
• Chrome/Firefox/Safari 都默认把 rt 渲染成小号上标，无需额外 CSS；但 iOS Safari 在某些字号下可能压扁，可加 ruby { ruby-position: over; } 强制位置

为什么不用 aria-label 或 title 替代

这两个属性看着省事，实际在地名场景下基本无效：

• title 只触发鼠标悬停提示，触屏设备、键盘导航、屏幕阅读器都不读——盲人用户完全感知不到“厦门”的“厦”该读 xià 还是 shà
• aria-label 会完全替换元素的可访问名称，导致“厦门市”变成“xià mén shì”，丢失汉字本体，破坏搜索、复制、SEO 和双语对照需求
• 部分地图类网站用 JS 动态插入拼音浮层，但无法被爬虫索引，打印时消失，且焦点管理极易出错

兼容老浏览器或纯文本环境怎么办

IE8 及更早版本不支持 ruby，但这类场景现在极少；真需兜底，只做两件事：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 在 ruby 外层加简明括号注音，作为视觉降级 fallback：重庆（chóng qìng），同时保留内部 ruby 结构
• 避免用 Unicode 拼音字符（如 重⃗）或组合字符，它们在字体缺失时显示为方块，且无法被语音引擎解析
• 导出 PDF 或生成静态页时，如果工具不支持 ruby 渲染（如某些 wkhtmltopdf 版本），提前用脚本展开为“重_chóng庆_qìng”，再转 PDF

地名多音字标注容易漏掉的关键细节

不是标了拼音就万事大吉。真正出问题的往往是这些隐性环节：

• “蚌埠”读 bèng bù，“大埔”读 dà bù——同一个“埔”字在不同地名中音不同，必须按具体地名查《现代汉语词典》或民政部《地名用字读音审定表》，不能凭经验推断
• 带“台”字的地名（台州、台湾、天台山），“台”分别读 tāi、tái、tāi，必须逐个确认，不能统一处理
• 拼音大小写和声调必须准确：亳州 是 bó zhōu，不是 bo zhou；声调标错会导致语音合成器读成完全不同的词
• 如果页面内容由 CMS 或 API 动态注入，确保后端返回的是已校验过的带 ruby 结构的 HTML 片段，而不是让前端 JS 拼接——JS 注入的 ruby 在部分旧版读屏软件中可能不被识别

多音字读音不是排版装饰，是信息准确性的一部分。标错一个音，可能让外地人导航走错几十公里，或者让语音助手反复听不懂指令。

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