多音字必须人工判读，不能依赖自动拼音库硬套；因工具按字标音、无法理解上下文，“长”在“长度”读cháng、“长大”读zhǎng，误标将导致语义错误；屏幕阅读器照读，听者无法分辨。

多音字必须人工判读，不能靠自动拼音库硬套

所有自动拼音工具（如 pinyin-pro、pypinyin）都只能按字给音，无法理解上下文。“长”在“长度”里读 cháng，在“长大”里读 zhǎng，工具默认可能全标成 cháng 或 zhǎng，导致语义错误。屏幕阅读器会照读，听者无法分辨。

实操建议：

• 对含多音字的词，先人工确认读音，再生成 结构
• 避免用 data-pinyin 或 title 存备用音——这些不参与语义渲染，对无障碍无效
• 若需提供多音对照（如教学场景），用并列 +：长cháng长zhǎng，而非在一个 里写 cháng/zhǎng

结构必须严格：每个字一个 ，每个 后紧跟对应

写成 否pǐ 看似省事，但 Safari 和旧版 Edge 会把 当作无锚点文本，导致拼音左贴、偏移甚至垂直错行。根本原因是缺少 提供基线定位依据。

实操建议：

• 哪怕单字也必须包 ：否pǐ
• 多字词逐字拆开，不可整词包裹：中zhōng华huá，不是 中华zhōng huá
• 动态生成时（如 Vue/React），确保 是 的**直接子节点**，中间不能插 Fragment 或空格

样式不设就失效：ruby-align、font-size、line-height 缺一不可

只写 HTML 结构，不加 CSS，多数浏览器会显示拼音但位置错乱：或叠在字上，或被截断，或水平左对齐。这不是 bug，是规范要求显式声明排版行为。

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

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

下载

实操建议：

• 全局重置：ruby { ruby-align: center; -webkit-ruby-align: center; line-height: 1.2; }
• rt 必须设 font-size: 0.6em（不用百分比，因缩放逻辑不一致）
• 禁用 position: absolute 调位置——它会让屏幕阅读器跳过注音，且破坏响应式
• 轻声字可加 rt[data-tone="light"] { font-size: 0.55em; }，配合 men

兼容性兜底：老浏览器靠 ，不是靠 JS 检测

IE9、旧安卓 WebView 不识别 ，会把 当普通文本渲染出来，变成“否pǐ”这种不可读形式。 不是装饰，是 fallback 必选项。

实操建议：

• 标准写法必须成对：否(pǐ)
• 现代浏览器隐藏 ，老浏览器显示“否(pǐ)”，语义完整可读
• 别用 JS 判断 UA 后动态插入标签——加载延迟、SSR 不友好、首屏语义缺失

真正容易被忽略的是：多音字标注不是技术问题，而是语义责任。你写的每个 都会被语音合成器朗读、被搜索引擎索引、被视障用户依赖。结构松散、样式缺位、fallback 缺失，任一环节出错，都会让“注音”变成“干扰”。

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