多音字拼音标注需统一用上方显示、显式声明Noto Sans CJK SC等支持声调的字体、对pypinyin输出做NFC归一化处理，并禁用相对单位以确保跨浏览器渲染一致。
多音字拼音标注时字体 fallback 不生效
直接用 font-family: "PingFang SC", "Microsoft YaHei", sans-serif 无法保证带声调拼音（如「ā」「ě」）正常显示，尤其在 macOS Safari 和 Windows Edge 中——因为多数中文字体不包含完整 Latin-1 Supplement + Combining Diacritical Marks 字符集，浏览器会静默回退到系统默认字体，导致声调位置偏移、重叠或缺失。
实操建议：
- 显式声明带声调字符专用字体栈：
font-family: "Noto Sans CJK SC", "Source Han Sans CN", "PingFang SC", sans-serif；Noto Sans CJK SC是目前对 Unicode 声调组合字符支持最稳定的开源字体 - 避免用
font-family: SimSun, serif：宋体对组合字符（如「ū」= u + U+0304）渲染极不稳定，iOS 上常丢掉声调符号 - 若必须兼容 IE11，加
@font-face引入NotoSansCJKsc-Regular.woff2并设unicode-range: U+0300-036F, U+0061-007A，只加载声调和基础拉丁字母，控制体积
ruby 标签里 rt 的 font-size 在 Safari 中被缩得过小
Safari 对 元素的默认字体缩放是 50%，Chrome 约 60%，Firefox 则基本继承父级。写成 font-size: 0.5em 在 Safari 下实际变成原字号的 25%，导致拼音几乎看不见；更糟的是，不同版本 Safari 对 em 缩放基数取值不一致（有的按 ，有的按 ）。
可靠做法：
- 统一用固定像素：
，禁用相对单位干扰 - 配合
，给拼音留足垂直空间，防止顶部被裁 - 不要依赖 CSS 类全局控制——富文本 CMS 输出时，外部样式易覆盖，内联样式更可控
pypinyin 多音字输出与字体渲染错位
用 pypinyin.lazy_pinyin('银行', multiple=True) 得到 ['yín háng', 'yín xíng']，但直接塞进 会导致「xíng」里的「í」在部分字体中显示为方块或偏右——因为「í」是 i + U+0301 组合字符，而某些字体未正确实现 glyph positioning。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
解决路径：
- 优先启用
style='font-variant-east-asian: ruby'（Chrome 125+、Safari 17.4+ 支持），触发浏览器内置拼音排版优化 - 对多音字结果做预处理：用
unicodedata.normalize('NFC', pinyin_str)强制合成预组字符（如把i\u0301→í），减少组合渲染压力 - 若需降级兼容，改用 pypinyin 的
tone_marks='marks'模式配合font-family: "Noto Sans"，它对 NFC 形式支持更稳
移动端 Safari 不渲染 ruby-position: under
虽然 HTML5 规范允许 ruby-position: under 把拼音标在汉字下方，但 iOS Safari（包括 17.4）完全忽略该属性，只支持 over（即默认上方）。试图用 transform: translateY() 手动下拉 ，又会破坏 ruby-align: center 的基线计算，导致左右偏移。
务实方案：
- 放弃
ruby-position，所有场景统一用上方标注（这是当前唯一跨平台可靠的方案） - 若业务强需下方标注（如古籍校勘），改用绝对定位模拟：
汉hàn，并加pointer-events: none防止干扰点击 - 注意：iOS Safari 在
contenteditable区域里对渲染有额外 bug，必须加transform: translateZ(0)触发 GPU 层，否则拼音会闪动或错位
真实项目里最常被忽略的，是多音字拼音字符串的 Unicode 归一化处理——没做 NFC 转换时，同一段 HTML 在 Chrome 和 Safari 里可能一个显示「qǐ」、另一个只显示「qi」，问题难复现也难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
