必须作用于并配合line-height——因和的CSS继承被隔离，是唯一可控拼音尺寸的元素，且需用em单位确保缩放响应。
多音字拼音标注的字体大小不能靠 font-size 直接设在 <ruby></ruby> 或 <rb></rb> 上——必须作用于 <rt></rt>，且需配合 line-height 防裁切。
为什么改 <ruby></ruby> 或 <rb></rb> 的 font-size 没用？
浏览器对 <ruby></ruby> 的渲染是语义化布局：基字（<rb></rb>）和注音（<rt></rt>）属于不同“轨道”，CSS 继承链被隔离。直接给 <ruby></ruby> 设 font-size: 20px，<rt></rt> 通常仍按 UA 默认比例（约 50%–60%）缩放，不受控。
-
<rb></rb>的字号由其父容器决定，改它只影响基字，不影响拼音显示大小 -
<rt></rt>是唯一可稳定控制拼音尺寸的元素，但必须显式声明样式 - 不加
line-height时，Safari 和 Chrome 在小字号下容易裁掉<rt></rt>顶部，尤其当父容器有line-height: 1
<rt></rt> 字号设置的实操要点
统一用 em 或 rem 单位，避免像素硬编码；重点不是“多大”，而是“相对于基字的比例是否清晰可读”。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 推荐写法：
ruby rt { font-size: 0.6em; line-height: 1.3; }—— 0.6em 是主流浏览器默认缩放区间的合理起点，1.3 行高防重叠 - 若基字用了
rem（如p { font-size: 1.125rem; }），则rt用0.6rem会脱离基字比例，导致缩放失步，务必用em - 不要用
%（如60%），它在某些旧版 Safari 中解析不稳定 - 禁用
vertical-align或transform微调位置——会破坏 ruby 内建对齐逻辑，换行或缩放时错位
缩放场景下 <rt></rt> 容易失效的坑
当页面支持用户手动放大文字（比如通过修改 html { font-size } 实现全局缩放），<rt></rt> 若没用 em，就会卡死在原始尺寸。
立即学习“前端免费学习笔记（深入）”；
- 错误示范：
ruby rt { font-size: 12px; }→ 用户把根字号调到 24px，拼音还是 12px，变成“小蚂蚁” - 正确响应：
ruby rt { font-size: 0.6em; }→ 基字变 24px，拼音自动变成 14.4px，比例恒定 - 如果用了 CSS 变量（如
--base-ruby-size: 0.6;），记得在 :root 里定义，并确保所有rt都继承该变量，否则动态主题切换时会断连 - 移动端 Safari 对
ruby-position: under忽略，只认over（即上方），所以别指望用位置调整来“绕过”字号问题
最常被忽略的一点：拼音字号调完后，必须检查含标点、数字、英文混排的句子——这些字符不会被 <ruby></ruby> 包裹，但它们的行高和基线可能和 <rt></rt> 不对齐，造成视觉跳变。真要保一致，得用 line-height 统一整行，而不是只盯 <rt></rt>。
