文档演练博客

排版

¥Typography

字体使用和调整指南。

基本组件

¥Base components

使用文本和标题组件渲染标题和正文。这些组件共享 size 和 weight props，并映射到底层类型系统，以确保整个应用的排版一致。

¥Use Text and Heading components to render titles and body copy. These components share size and weight props and map to the underlying type system to ensure consistent typography throughout your app.

Typographic principles

The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant.

<Heading mb="2" size="4">Typographic principles</Heading>
<Text>The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant.</Text>

格式化组件

¥Formatting components

组合格式化组件以添加 emphasis、信号重要性、呈现 code 等。

¥Compose formatting components to add emphasis, signal importance, present code and more.

The most important thing to remember is, stay positive.

<Text>
	The <Em>most</Em> important thing to remember is,{" "}
	<Strong>stay positive</Strong>.
</Text>

字体缩放

¥Type scale

排版系统基于 9 级 size 比例。每个步骤都有相应的字体大小、行高和字母间距值，这些值均设计为可组合使用。

¥The typographic system is based on a 9-step size scale. Every step has a corresponding font size, line height and letter spacing value which are all designed to be used in combination.

The quick brown fox jumps over the lazy dog.

<Text size="6">The quick brown fox jumps over the lazy dog.</Text>

Step	Size	Letter spacing	Line height
1	`12px`	`0.0025em`	`16px`
2	`14px`	`0em`	`20px`
3	`16px`	`0em`	`24px`
4	`18px`	`-0.0025em`	`26px`
5	`20px`	`-0.005em`	`28px`
6	`24px`	`-0.00625em`	`30px`
7	`28px`	`-0.0075em`	`36px`
8	`35px`	`-0.01em`	`40px`
9	`60px`	`-0.025em`	`60px`

字体粗细

¥Font weight

支持以下粗细。可以将字重设置为 customized，以映射到你自己的字体。

¥The following weights are supported. Weights can be customized to map to your own typeface.

LightRegularMediumBold

<Text size="6">
	<Flex direction="column">
		<Text weight="light">Light</Text>
		<Text weight="regular">Regular</Text>
		<Text weight="medium">Medium</Text>
		<Text weight="bold">Bold</Text>
	</Flex>
</Text>

Weight	Default value
Light	`300`
Regular	`400`
Medium	`500`
Bold	`700`

字体系列

¥Font family

默认情况下，Radix Themes 使用系统字体堆栈来实现可移植性和易读性。继续阅读下一部分，了解如何使用自定义字体自定义主题。

¥By default, Radix Themes uses a system font stack for portability and legibility. Continue to the next section to learn about customizing your theme with a custom font.

Type	Default value
Text	`-apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, 'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'`
Code	`'Menlo', 'Consolas (Custom)', 'Bitstream Vera Sans Mono', monospace, 'Apple Color Emoji', 'Segoe UI Emoji'`
Emphasis	`'Times New Roman', 'Times', serif`
Quote	`'Times New Roman', 'Times', serif`

自定义

¥Customization

Radix Themes 的字体可以通过覆盖 token 系统相应的 CSS 变量进行自定义。有关排版标记的完整列表，请参阅源代码。

¥Radix Themes typography can be customized by overriding the corresponding CSS variables of the token system. Refer to the source code for the full list of the typographic tokens.

确保你的 CSS 在 Radix Themes 样式之后应用，以便其优先。

¥Make sure that your CSS is applied after the Radix Themes styles so that it takes precedence.

自定义字体

¥Custom fonts

你可以提供自己的字体，但是，如何导入和使用它们取决于你。你只需使用正确的语法指定命名字体即可。

¥You can provide your own fonts, however, how you choose to import and serve them is up to you. It is only required that you specify your named fonts using the correct syntax.

要自定义主题中使用的字体系列，请重新映射相应的 font-family 标记：

¥To customize the font family used in your theme, remap the corresponding font-family tokens:

.radix-themes {
	--default-font-family:  /* Your custom default font */ --heading-font-family:
		/* Your custom font for <Heading> components */ --code-font-family:
		/* Your custom font for <Code> components */ --strong-font-family:
		/* Your custom font for <Strong> components */ --em-font-family:
		/* Your custom font for <Em> components */ --quote-font-family:
		/* Your custom font for <Quote> components */;
}

使用 next/font

¥With next/font

要通过 next/font 加载自定义字体，请使用 variable 选项定义 CSS 变量名。然后，将该 CSS 变量类添加到你的 HTML 文档中。

¥To load custom fonts via next/font, use the variable option to define a CSS variable name. Then, add that CSS variable class to your HTML document.

import { Inter } from "next/font/google";

const inter = Inter({
	subsets: ["latin"],
	display: "swap",
	variable: "--font-inter",
});

export default function RootLayout({ children }) {
	return (
		<html lang="en" className={inter.variable}>
			<body>{children}</body>
		</html>
	);
}

最后，在你的自定义 CSS 中分配 CSS 变量：

¥Finally, assign the CSS variable in your custom CSS:

.radix-themes {
	--default-font-family: var(--font-inter);
}

请注意，如果你正在运行应用路由，可能会遇到 CSS 导入顺序问题。有关更多信息，请参阅常见样式问题。

¥Be aware that you may encounter css import order issues if you are running the app router. See common styling issues for more information.

自定义字体粗细

¥Custom font weights

要自定义主题中使用的确切字体粗细，请将相应的 font-weight 标记重新映射到你自己的值：

¥To customize the exact font weights used in your theme, remap the corresponding font-weight tokens to your own values:

.radix-themes {
	--font-weight-light: 200;
	--font-weight-regular: 300;
	--font-weight-medium: 600;
	--font-weight-bold: 800;
}

高级设置

¥Advanced settings

有许多可自定义的高级排版功能。这些功能包括某些组件的字体大小乘数、字体样式、字母间距和行距修剪。例如，你可以自定义标题，使其使用比默认字体更大的字体大小、不同的行距修剪值和更紧密的字母间距进行渲染：

¥There’s a number of advanced typographic features that can be customized. These include a font size multiplier for certain components, font style, letter spacing, and leading trim. For example, you can customize the headings to render with a relatively larger font size than your default font, different leading trim values, and tighter letter spacing:

.radix-themes {
	--heading-font-family: "Untitled Sans", sans-serif;
	--heading-font-size-adjust: 1.05;
	--heading-font-style: normal;
	--heading-leading-trim-start: 0.42em;
	--heading-leading-trim-end: 0.38em;
	--heading-letter-spacing: -0.01em;
}

Previous暗黑模式

Next间距

概览

主题

布局

排版

组件

实用工具

排版

Typographic principles