不能依赖 rt 默认 font-size: 50%，因各浏览器实现不一（chrome 50%、firefox 60%、safari≤16 回退 100%），导致拼音大小错乱；应统一用 rt { font-size: 0.6em } 并显式设 ruby { font-size: 1em }，配合 line-height 与 ruby-align 协同控制对齐。
ruby 标签本身不控制字号比例，真正起作用的是 rb 和 rt 的独立样式协同；盲目套用浏览器默认缩放（如 rt 默认 50%）会导致 Safari、Firefox、旧版 Edge 渲染错位、拼音被裁或上下偏移。
为什么不能依赖 rt 的默认 font-size: 50%
不同浏览器对 rt 的默认缩放实现不一致：Chrome 用 50%，Firefox 用 60%，Safari 16 及更早版本甚至忽略该值直接回退到 100%——结果就是同一段代码，在 Safari 里拼音和汉字一样大，在 Chrome 里却挤成一条细线。这不是 bug，是规范允许的“实现自由”。
-
rt { font-size: 0.6em }比50%更可控，因为 em 基于当前ruby的font-size，而非父元素或 UA 默认值 - 必须显式设
ruby { font-size: 1em }，否则rt的 em 计算会继承外部段落或标题的异常字号 - 避免
font-size: 0.5rem：rem 依赖根元素，而ruby常用于内联文本，根字号波动（如用户开启系统大字体）会让拼音比例失控
ruby 和 rt 的 line-height 必须配对调
只调字号不调行高，ruby-align: center 就形同虚设——拼音会被上下挤压，视觉上根本“居中”不了。问题根源在于：浏览器计算 ruby 垂直对齐时，依赖 rb 的内容高度与 rt 的行框高度之比。
-
ruby { line-height: 1.2 }：足够容纳汉字基线+拼音空间，又不会撑开段落 -
rt { line-height: 1 }：禁用rt自身行高继承，防止 Firefox 把拼音拉得过高 - 别用
vertical-align: super模拟上标：它不响应ruby-align，且在不同字体下偏移量浮动极大
iOS Safari 和 Android WebView 的兼容微调
iOS Safari 17.4 在 contenteditable 区域里对 ruby 的 GPU 渲染有缺陷，拼音易模糊或错位；部分安卓 WebView（如 UC 内核）则对连续 ruby 元素间距计算异常，导致字间空隙忽大忽小。
- 对可编辑区域加
ruby { transform: translateZ(0) }，强制触发硬件加速 - 给包裹多个
ruby的容器设font-size: 0，再对每个ruby单独设font-size: 1rem，消除子像素间隙 - 导出 PDF 或用
wkhtmltopdf时，rt标签会被完全忽略，必须用 JS 预渲染为span+aria-label降级
最常被忽略的一点：字号比例不是孤立参数，它必须和 ruby-align、ruby-position、text-rendering 同步生效；少设任意一项，就可能让整套注音在某个设备上“看起来像没写 CSS”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
