应设为font-size: 12px，因固定像素可避免浏览器对百分比计算不一致导致的偏移或截断，且在主流浏览器和高DPI屏下具备清晰可读性。
ruby标签里rt字体大小设多少才不压字
直接写 font-size: 0.5em 在多数浏览器里会太小，尤其在高DPI屏或系统缩放开启时，拼音可能糊成一团甚至被截断。关键不是“按比例缩”，而是用固定像素锚定可读性底线。
-
font-size: 12px是当前最稳妥的起点：Chrome/Firefox/Safari 在 16px 正文字号下能清晰显示，且不触发 Safari 的自动缩放降级 - 别用
em或rem，因为<rt>的基准是父元素字号，而父元素可能被重设过 line-height 或 font-size，导致计算失准 - 如果正文用了
14px或18px，把<rt>改成13px或14px即可，无需严格按比例换算——人眼对拼音尺寸的容忍度远高于对齐精度
line-height设太高拼音会被截断？
是的，但问题不在“太高”，而在“没留够上间距”。<rt> 默认渲染位置是基线（baseline）上方，而浏览器对 ruby 的垂直定位逻辑不统一：Chrome 倾向上浮，Safari 更依赖 line-height 预留空间。
- 给包含
<ruby>的段落或容器设line-height: 1.8（不是<ruby>自身），这是防截断最有效的一步 - 不要给
<ruby>设line-height，它会干扰内部基字与注音的相对位置 - 若仍被顶部截断，加
padding-top: 2px到<ruby>上——比调 line-height 更可控
white-space: nowrap 会影响正文流吗
会，而且影响很隐蔽。给整个段落加 white-space: nowrap 会导致换行失效、文本溢出容器，这不是 ruby 的问题，而是 CSS 作用域失控。
- 只对单个
<ruby>元素加white-space: nowrap，例如：<ruby style="white-space: nowrap"><rb>汉</rb><rt>hàn</rt></ruby> - 绝对不要在
p、div等块级容器上全局设置该样式，否则中文段落无法按字折行，阅读体验崩坏 - 如果担心“苹”和“果”的拼音被拆到两行，靠
nowrap不如靠结构：用两个独立<ruby>，它们天然不会跨行断裂
多字连排时 ruby 容器宽度怎么算
浏览器把每个 <ruby> 当作一个不可分割的内联盒子，它的宽度 = 基字宽度 + <rt> 渲染所需水平空间。但这个“所需空间”受字体度量影响极大——中文字体里“i”和“w”的宽度差异，在拼音里体现为“zì”比“hàn”宽出近 20%。
立即学习“前端免费学习笔记（深入）”；
- 不要用
width或min-width强制约束<ruby>，它会挤压基字或裁剪拼音 - 若需对齐多组拼音（如表格列），统一用
text-align: center+ 固定font-size，比控制宽度更可靠 - 遇到“长”“重”这类笔画多的字，拼音常偏右，可单独加
margin-left: -1px微调，而不是拉宽容器
<rt> 当作纯装饰来处理——它本质是语义节点，尺寸、位置、换行行为都受 HTML 结构和 CSS 层叠双重约束，任何“看起来差不多”的写法，在 iOS Safari 或安卓 WebView 里都可能突然错位。 
