ruby标签默认字号小是因为rt/rp被浏览器设为50%；需显式设置rt、rp的font-size（如1em），并配合line-height和ruby-align确保垂直节奏。
ruby标签默认字号为什么小且难调
ruby 标签本身不带默认字体大小，它完全继承父元素的 font-size；但浏览器对 rp（括号）和 rt（注音）有内置样式，例如 Chrome 会把 rt 设为 font-size: 50%，Firefox 类似。这就导致：即使你给 ruby 设了 20px，rt 仍按一半显示——不是没生效，是被子元素样式覆盖了。
直接改rt和rp的font-size才有效
必须显式重置 rt 和 rp 的字号，否则继承链和浏览器 UA 样式会干扰。常见写法：
ruby {
font-size: 16px;
}
rt, rp {
font-size: 1em; /* 或 100%, 或具体值如 14px */
}
-
1em表示“和ruby一样大”，最直观；用100%效果相同 - 避免用
0.8em这类相对值——如果ruby本身是1.2rem，再套一层0.8em就容易算错 - 不要只写
ruby rt { font-size: 16px; }，漏掉rp会导致括号（如“（”“）”）字号不一致
用rem控制全局注音字号更稳
如果你整站用 rem 做字体基准（比如 html { font-size: 16px; }），那么统一设 rt { font-size: 0.75rem; } 就能确保所有注音在缩放时同步变化。关键点：
-
rt的rem值始终相对于html，不受父级ruby是否用了em或%影响 - 用户用系统“增大文字”功能时，
html的font-size会被浏览器自动调整，rt也会跟着变——这是px或硬编码%做不到的 - 别在
ruby上用font-size: 120%再让rt用0.8em，两层相对单位嵌套极易失控
移动端注音挤在一起？检查line-height和ruby-align
字号调大后，rt 可能和主文本贴太近，甚至重叠。这不是字号问题，而是行高和对齐控制缺失：
- 给
ruby加line-height: 2或更高，留出垂直空间 - 用
ruby-align: center（或space-around）让注音在水平方向居中分布，避免靠左堆叠 - 部分安卓 WebView 对
ruby-align支持弱，可加display: inline-block; margin: 0 2px;到rt作兜底 - 别用
transform: scale()拉大rt——它会破坏基线对齐，打印和屏幕阅读器也读不准
实际开发中最容易被忽略的是：改完 rt 字号后，没同步调 line-height 和 ruby-align，结果注音要么贴着字干、要么飘到行外。字号只是起点，垂直节奏才是注音可读性的关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
