标注多音字须用显式绑定汉字与注音，CSS通过ruby-align和letter-spacing控制间隔，禁用空格分隔，IE等旧浏览器需降级fallback。

用 和 标注多音字时，音节间隔由 CSS 控制

HTML 原生不提供“音节间隔”属性， 结构只负责语义绑定（汉字 + 注音），真正控制音节之间空隙的是 CSS 的 ruby-align 和 letter-spacing。直接写 里加空格或全角空格，会导致渲染错位或语义污染，不可取。

• 内容应为连续注音（如 zhòng），不插入空格、不拆音节
• 若需让每个汉字的注音横向拉开，对 设置 ruby-align: space-around 或 ruby-align: space-between
• 若需微调单个注音内字母间距（比如让 “zhòng” 显示得更松），可对 单独设 letter-spacing: 0.05em，但慎用——会影响可读性和屏幕阅读器解析

多音字标注必须配合 显式包裹汉字

现代浏览器（Chrome 120+、Firefox 125+、Safari 17.5+）要求多字多音场景下，每个汉字和对应注音必须一一配对，否则 可能整体偏移或被截断。不写 ，浏览器会尝试自动分组，但对“重”“长”“行”这类多音多义字极易出错。

• 正确写法：重zhòng长zhǎng
• 错误写法：重长zhòng zhǎng（注音字符串无结构，无法对齐）
• 若用 JavaScript 动态生成，务必确保 和 数量严格相等，且顺序一致

IE 和旧版 Safari 不支持 ，需降级 fallback

是 HTML5.2 新增标签，IE 完全不识别，Safari ≤16 会忽略它导致注音堆叠在第一个字上。不能只靠 CSS hack，必须用显式降级策略。

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

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

下载

• 用 @supports (ruby-align: space-around) 区分支持环境，在不支持时显示纯文本注音（如 “重(zhòng)长(zhǎng)”）
• 避免用 模拟 ：CSS ruby 属性对非标准元素无效，仅视觉模拟不可访问
• 若项目必须兼容 IE，建议放弃 ，改用 aria-label + CSS positioning 手动定位注音，但需额外维护焦点和朗读逻辑

最易被忽略的一点：多音字标注不是排版问题，而是语义与可访问性问题。 的价值在于让屏幕阅读器按字播报注音，一旦用空格、伪元素或 JS 插入分隔符，就破坏了 DOM 结构和 ARIA 遍历顺序。音节间隔只是表象，对齐精度和语音输出一致性才是关键。

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