### [ruby 样式标准化：字号行高位置都要定](https://www.huociguo.com/article/1766)

**Published:** 2026-10-02T09:58:11

**Author:** 米了

**Excerpt:** 老站重构时，ruby 注音的渲染散落在各浏览器的默认样式里，同一页码在不同终端字号飘忽、行高错乱。重构阶段需要…

老站重构时，ruby 注音的渲染散落在各浏览器的默认样式里，同一页码在不同终端字号飘忽、行高错乱。重构阶段需要一份显式的标准化定义，把默认值全部接管过来。

![放大镜下的书页文字](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-4494644.jpeg)

排版标准化从显式声明开始。图片来自 Pexels。

## 字号

rt { font-size: 0.65em; }

用 em 而不是固定像素，注音随正文缩放。0.65 到 0.7 之间阅读舒适度较好，低于 0.5 小屏上难以辨认。

## 行高

ruby { line-height: 1; }
rt { line-height: 1.2; }

ruby 默认行高会把整行撑高，段落的行距被注音行带乱。收紧 ruby 自身的行高，正文节奏才能保持。

## 位置

ruby { ruby-position: over; }

横排中文注音固定在上方。竖排场景另算，混排文档不要依赖默认值。

## 结构与语义

多字注音拆成独立的 ruby 单元，一个词一个，对齐与换行都更可控。rp 括号只放标点，嵌在 rt 外侧。多语言混排时给 ruby 标 lang，混排方向异常的段落用 bdi 隔离，读屏工具的发音依赖这两处信息。

## 验收清单

1.  双端抽查注音字号与正文比例。
2.  含注音段落的行距与纯文本段落一致。
3.  长注音换行不断字。
4.  读屏抽听一条注音。

**Tags:** CSS重置, ruby标签, 无障碍交互, 注音排版, 浏览器差异

**Categories:** HTML5

---