必须作用于并配合line-height——因和的CSS继承被隔离,是唯一可控拼音尺寸的元素,且需用em单位确保缩放响应。

多音字拼音标注的字体大小不能靠 font-size 直接设在 或 上——必须作用于 ,且需配合 line-height 防裁切。
为什么改 或 的 font-size 没用?
浏览器对 的渲染是语义化布局:基字()和注音()属于不同“轨道”,CSS 继承链被隔离。直接给 设 font-size: 20px, 通常仍按 UA 默认比例(约 50%–60%)缩放,不受控。
-
的字号由其父容器决定,改它只影响基字,不影响拼音显示大小 -
是唯一可稳定控制拼音尺寸的元素,但必须显式声明样式 - 不加
line-height时,Safari 和 Chrome 在小字号下容易裁掉顶部,尤其当父容器有line-height: 1
字号设置的实操要点
统一用 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 内建对齐逻辑,换行或缩放时错位
缩放场景下 容易失效的坑
当页面支持用户手动放大文字(比如通过修改 html { font-size } 实现全局缩放), 若没用 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(即上方),所以别指望用位置调整来“绕过”字号问题
最常被忽略的一点:拼音字号调完后,必须检查含标点、数字、英文混排的句子——这些字符不会被 包裹,但它们的行高和基线可能和 不对齐,造成视觉跳变。真要保一致,得用 line-height 统一整行,而不是只盯 。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










