### [ruby 标签与字体：注音排版的兼容处理](https://www.huociguo.com/article/1538)

**Published:** 2026-09-30T05:31:57

**Author:** 米了

**Excerpt:** ruby 不依赖特定字体，显示是否稳定却由字体决定。四类字体的表现对照、rt 层的加固写法与 rp 兜底。

ruby 标签不依赖特定字体就能形成注音结构，显示是否稳定却由字体决定。同一段标记换一套字体系，注音可能从对齐变成错位甚至塌陷，问题多数出在 rt 这一层。

![开启的电脑显示器显示文本内容，用于说明注音排版的字体差异](https://api.huociguo.com/wp-content/uploads/2026/09/c1.jpg)

注音错位通常来自 rt 继承的字体系与字号

## 四类字体的表现

| 字体类型 | 注音表现 | 处理建议 |
| --- | --- | --- |
| 系统中文字体（PingFang SC、Noto Sans CJK、Microsoft YaHei） | 宽度与基线稳定 | 直接使用 |
| 西文字体（Arial、Helvetica） | rb 与 rt 基线不一致，注音偏移 | 显式指定中文字体族 |
| 等宽字体 | 字符宽度失配，注音容易塌陷 | 注音区域不用等宽字体 |
| 自托管子集字体 | 缺 CJK 字形时注音缺失 | 补全字形或回退系统字体 |

## rt 层的加固写法

```css
ruby rt {
  font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  font-size: 12px;
  line-height: 1;
}

ruby {
  ruby-align: center;
  ruby-position: over;
}
```

rt 的字号写成固定像素值，避免继承父级的 em 单位在不同层级标题里放大幅度不一。竖排场景改用 `ruby-position` 的 under 或 inter-character 取值，并与 writing-mode 一同目检。

## 结构与兜底

```html
<ruby>
  汉字
  <rp>(</rp><rt>hanzi</rt><rp>)</rp>
</ruby>
```

rp 面向不认识 ruby 的老浏览器，用括号把注音包起来。结构缺失比样式偏差更影响可读性，这一层不要省。

## 验收清单

-   至少三套字体系下目检一次注音位置；
-   长词发生断行时注音跟随不脱节；
-   禁用 JavaScript 后结构不散；
-   打印样式保留注音，不被打印 CSS 抹掉；
-   字号写死在 rt 上，不使用继承值。

**Tags:** CSS字号, ruby标签, 东亚排版, 字体兼容, 浏览器兼容

**Categories:** HTML5

---