ruby标签内汉字间距变大是因继承父级letter-spacing或浏览器默认排版设置；需重置ruby { letter-spacing: 0; }，删除标签间空白，统一rt字体栈并微调line-height与vertical-align。
ruby标签里汉字间距变大，是CSS继承导致的
直接用ruby包裹汉字时，常见现象是“汉”“字”之间空隙比普通文本大——这不是ruby本身加了间距，而是浏览器对ruby元素默认应用了letter-spacing或继承了父级的宽松排版设置。尤其在富文本编辑器输出、CMS模板或重置样式（如Normalize.css）后更明显。
实操建议：
- 检查父容器是否设了letter-spacing: 0.05em之类值，它会透传给ruby内的所有内联内容
- 给ruby显式重置： ruby { letter-spacing: 0; }
- 若需保留轻微字距，改用ruby { margin-right: -0.03em; }微调相邻ruby块之间的距离，比全局letter-spacing更可控
- 避免对rb单独设margin，会导致基字与拼音错位
多个ruby连续排列时中间多出空白
写成<ruby><rb>汉</rb><rt>hàn</rt></ruby><ruby><rb>字</rb><rt>zì</rt></ruby>后，两个汉字之间出现额外空隙，本质是HTML解析时把换行符/空格当成了文本节点，而ruby作为内联元素会渲染这些空白。
解决方法：
- 删除ruby标签间的换行和空格，写成紧挨形式：<ruby>...</ruby><ruby>...</ruby>
- 或用font-size: 0父容器 + 子元素重设字号：<div style="font-size: 0">
<ruby style="font-size: 16px">...</ruby><ruby style="font-size: 16px">...</ruby>
</div>
- 不要用display: flex强行拉近——会破坏ruby的语义流，影响屏幕阅读器朗读顺序
拼音和汉字视觉对不齐，误以为是字距问题
看起来像“字距不准”，实际常是rt字体度量与基字不匹配：中文系统字体中，拼音字符（拉丁字母+声调）的x-height偏低，加上浏览器默认缩放比例不一，导致视觉上“飘”或“压”在汉字上。
关键调整项：
- 强制统一rt字体栈：rt { font-family: "Helvetica Neue", "PingFang SC", sans-serif; }（避免系统回退到等宽字体）
- 补偿x-height差异：rt { line-height: 1.1; vertical-align: 0.15em; }（注意：vertical-align仅作微调，不能替代ruby-position）
- 禁用text-rendering: optimizeLegibility——该属性在Safari中会加剧拉丁字符与汉字基线偏移
- 不要给rb设padding或border，否则干扰浏览器自动计算注音锚点
移动端iOS Safari中字距异常拉伸
iOS 17+ Safari对连续ruby块有特殊处理：当页面启用text-size-adjust: auto（默认）且字体小于16px时，会主动拉宽内联元素间距以提升可读性——这会让拼音和汉字之间空隙突增，甚至断行错乱。
稳定方案：
- 在ruby父容器加text-size-adjust: none（仅限需要精确控制的场景）
- 更推荐：用ruby { font-size: 16px; }兜底，确保基础字号不低于系统最小可读阈值
- 若必须小字号，配合ruby { word-spacing: -0.02em; }抵消拉伸，但需测试不同机型（iPhone SE vs iPad Pro渲染差异明显）
最易被忽略的一点：字距问题往往不是孤立存在，而是rb结构不完整、rt样式未重置、父级排版规则冲突三者叠加的结果。先确认每个汉字都有独立<rb></rb>，再逐层检查CSS继承链，比盲目调letter-spacing更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
