排版
raft-ui 有一套全局字号体系。字号、行高、字重和字距都来自 --r-* token,组件和你自己的界面因此能对齐。字体家族见字体。Typography 排版组件(Heading、Text、Paragraph 等)已经按这套字号体系排好文字。
字号档位
共九档,每档是一个字号配一个固定行高。档位按密集界面调过:大部分文字落在 1 到 4 档(10 到 14px)。
| 级 | 示例 | 字号 / 行高 |
|---|---|---|
| 1 | 敏捷的棕色狐狸跳过了懒狗 The quick brown fox | 10 / 14--r-font-size-1 |
| 2 | 敏捷的棕色狐狸跳过了懒狗 The quick brown fox | 11 / 16--r-font-size-2 |
| 3 | 敏捷的棕色狐狸跳过了懒狗 The quick brown fox | 12 / 16--r-font-size-3 |
| 4 | 敏捷的棕色狐狸跳过了懒狗 The quick brown fox | 14 / 20--r-font-size-4 |
| 5 | 敏捷的棕色狐狸跳过了懒狗 The quick brown fox | 16 / 24--r-font-size-5 |
| 6 | 敏捷的棕色狐狸跳过了懒狗 The quick brown fox | 18 / 26--r-font-size-6 |
| 7 | 敏捷的棕色狐狸跳过了懒狗 The quick brown fox | 20 / 28--r-font-size-7 |
| 8 | 敏捷的棕色狐狸跳过了懒狗 The quick brown fox | 24 / 32--r-font-size-8 |
| 9 | 敏捷的棕色狐狸跳过了懒狗 The quick brown fox | 30 / 38--r-font-size-9 |
| 档 | --r-font-size-N | --r-line-height-N | 常见用途 |
|---|---|---|---|
| 1 | 10px | 14px | 等宽小标签、角标 |
| 2 | 11px | 16px | 等宽元信息 |
| 3 | 12px | 16px | 次要信息、说明文字、时间戳 |
| 4 | 14px | 20px | 正文、消息(默认) |
| 5 | 16px | 24px | 大号正文、h4 |
| 6 | 18px | 26px | h3、面板标题 |
| 7 | 20px | 28px | h2 |
| 8 | 24px | 32px | h1、页面标题 |
| 9 | 30px | 38px | 展示用 |
同一档的字号和行高总是一起用:
css
.my-caption {
font-size: var(--r-font-size-3);
line-height: var(--r-line-height-3);
}行高用固定像素,密集列表里的行才对得齐。长文阅读(比如文档)改用 --r-line-height-prose(1.6)。
字重
| Token | Brutal | Elegant |
|---|---|---|
--r-font-weight-regular | 400 | 400 |
--r-font-weight-medium | 500 | 500 |
--r-font-weight-strong | 700 | 600 |
--r-font-weight-heavy | 800 | 800 |
strong 是各主题的强调字重。Brutal 用的 Space Grotesk 最粗只到 700,所以除非你在 r-sans 下加载了更粗的字体,heavy 在 Brutal 里显示为 700。见字体页的“检查字重”一节。
字距
| Token | 值 | 常见用途 |
|---|---|---|
--r-letter-spacing-tight | -0.01em | 大标题 |
--r-letter-spacing-normal | 0 | 其他所有文字 |
--r-letter-spacing-wide | 0.02em | 需要透气的小字 |
--r-letter-spacing-widest | 0.08em | 大写的区块小标题、标签 |
控件
控件尺寸保留自己的 token:--r-common-font-size-tiny / -small / -medium / -large。前三个分别指向第 3、4、4 档(12、14、14px);large 仍是 15px,介于第 4 档和第 5 档之间。
文字颜色
每个主题根(:root,以及任何带 data-r-theme 的元素,比如设置了 theme 的 ConfigProvider)都把 color 设为 --rw-alias-label-primary。主题根里的文字不会退回浏览器默认的黑色,否则在 Elegant dark 下会看不清。字体家族和字号不在根上设置,仍然从你的页面继承。