字体
raft-ui 为每个主题选好了字体家族，但从不加载字体文件。字体怎么来由你的应用决定：自己托管、用字体服务，或者干脆不加载。
每个主题用什么字体
| 主题 | 正文（--r-font-sans） | 标题（--r-font-heading） | 等宽（--r-font-mono） |
|---|---|---|---|
| Brutal | Space Grotesk | Space Grotesk | Geist Mono |
| Elegant light | Geist | Inter | Geist Mono |
| Elegant dark | Geist | Inter | Geist Mono |
字体栈是怎么组成的
每个字体栈都由三部分组成，顺序如下：
css
--r-font-sans: r-sans, "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, …;
/* ↑ 别名 ↑ 主题字体 ↑ 系统回退 */- 逻辑别名：
r-sans、r-heading或r-mono。默认没有任何字体注册在这些名字下，浏览器会跳过它们。把一个字体注册成其中某个名字，就能在所有主题里替换这个角色的字体，不用写主题覆盖。 - 主题字体：Space Grotesk、Geist、Inter 或 Geist Mono。页面加载了它或者用户设备上装了它时才会用上。
- 系统回退：前两者都没有时使用，保证文字总能显示。
不做任何字体设置时，raft-ui 用系统字体渲染。
加载主题字体
自己托管（生产环境推荐）
自己提供字体文件，用上表里的字体名写 @font-face：
css
@font-face {
font-family: "Space Grotesk";
src: url("/fonts/SpaceGrotesk-Variable.woff2") format("woff2");
font-weight: 300 700;
font-display: swap;
}
@font-face {
font-family: "Geist";
src: url("/fonts/Geist-Variable.woff2") format("woff2");
font-weight: 100 900;
font-display: swap;
}只加载你的主题实际用到的字体。只用 Brutal 的应用只需要 Space Grotesk 和 Geist Mono。
从 Google Fonts 加载
本文档站就是这么做的：
css
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400..700&family=Geist+Mono:wght@300..700&family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@300..700&display=swap");放进应用的全局 CSS。注意这会让每个页面都去请求第三方域名。
使用自己的字体
把你的字体注册成你想替换的那个角色的别名。比如在所有主题里把正文换成品牌字体：
css
@font-face {
font-family: r-sans;
src: url("/fonts/Brand-Variable.woff2") format("woff2");
font-weight: 100 900;
font-display: swap;
}r-heading 对应标题。在 Brutal 里，没单独注册 r-heading 时标题跟随 r-sans。r-mono 对应代码。
只想在页面的一部分、或者只在某个主题里换字体，就覆盖变量：
tsx
<ConfigProvider theme="elegant" themeOverrides={{ "--r-font-sans": '"Brand", system-ui, sans-serif' }}>
…
</ConfigProvider>检查字重
raft-ui 用到这些字重：
| Token | 值 | 用在 |
|---|---|---|
--r-common-font-weight | 400 | 正文，Elegant 的按钮和控件 |
--r-common-font-weight-strong | 500 | 强调，Elegant 的 strong 按钮 |
--r-button-font-weight（Brutal） | 500 | Brutal 的按钮 |
--r-button-font-weight-strong（Brutal） | 700 | Brutal 的 strong 按钮 |
确认你加载的字体提供这些字重；覆盖 300–700 的可变字体就可以。字体缺某个字重时，浏览器会合成假粗体或者选最接近的字重，文字可能比预期更粗或更细。如果你的字体在别的字重下更好看，用 themeOverrides 调整这些 token：
tsx
<ConfigProvider theme="elegant" themeOverrides={{ "--r-common-font-weight-strong": "600" }}>…</ConfigProvider>