跳到正文

排版

raft-ui 有一套全局字号体系。字号、行高、字重和字距都来自 --r-* token,组件和你自己的界面因此能对齐。字体家族见字体。Typography 排版组件(Heading、Text、Paragraph 等)已经按这套字号体系排好文字。

字号档位

共九档,每档是一个字号配一个固定行高。档位按密集界面调过:大部分文字落在 1 到 4 档(10 到 14px)。

级示例字号 / 行高
1敏捷的棕色狐狸跳过了懒狗 The quick brown fox10 / 14--r-font-size-1
2敏捷的棕色狐狸跳过了懒狗 The quick brown fox11 / 16--r-font-size-2
3敏捷的棕色狐狸跳过了懒狗 The quick brown fox12 / 16--r-font-size-3
4敏捷的棕色狐狸跳过了懒狗 The quick brown fox14 / 20--r-font-size-4
5敏捷的棕色狐狸跳过了懒狗 The quick brown fox16 / 24--r-font-size-5
6敏捷的棕色狐狸跳过了懒狗 The quick brown fox18 / 26--r-font-size-6
7敏捷的棕色狐狸跳过了懒狗 The quick brown fox20 / 28--r-font-size-7
8敏捷的棕色狐狸跳过了懒狗 The quick brown fox24 / 32--r-font-size-8
9敏捷的棕色狐狸跳过了懒狗 The quick brown fox30 / 38--r-font-size-9
档--r-font-size-N--r-line-height-N常见用途
110px14px等宽小标签、角标
211px16px等宽元信息
312px16px次要信息、说明文字、时间戳
414px20px正文、消息(默认)
516px24px大号正文、h4
618px26pxh3、面板标题
720px28pxh2
824px32pxh1、页面标题
930px38px展示用

同一档的字号和行高总是一起用:

css
.my-caption { font-size: var(--r-font-size-3); line-height: var(--r-line-height-3); }

行高用固定像素,密集列表里的行才对得齐。长文阅读(比如文档)改用 --r-line-height-prose(1.6)。

字重

TokenBrutalElegant
--r-font-weight-regular400400
--r-font-weight-medium500500
--r-font-weight-strong700600
--r-font-weight-heavy800800

strong 是各主题的强调字重。Brutal 用的 Space Grotesk 最粗只到 700,所以除非你在 r-sans 下加载了更粗的字体,heavy 在 Brutal 里显示为 700。见字体页的“检查字重”一节。

字距

Token值常见用途
--r-letter-spacing-tight-0.01em大标题
--r-letter-spacing-normal0其他所有文字
--r-letter-spacing-wide0.02em需要透气的小字
--r-letter-spacing-widest0.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 下会看不清。字体家族和字号不在根上设置,仍然从你的页面继承。