排版

使用和调整排版的指南。

基础组件

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

排版原则

排版的目的是以成比例的方式关联字体大小、行高和行宽，从而最大限度地提高美观性，使阅读更轻松愉快。

<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>

格式化组件

组合格式化组件以添加强调、强调重要性、呈现代码等。

要记住最重要的事情是， 保持积极.

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

字体比例

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

The quick brown fox jumps over the lazy dog.

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

步数	大小	字母间距	行高
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`

字体粗细

支持以下粗细。粗细可以自定义以映射到您自己的字体。

细体常规体中等粗体

<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>

粗细	默认值
细体	`300`
常规体	`400`
中等	`500`
粗体	`700`

字体系列

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

类型	默认值
文本	`-apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, 'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'`
代码	`'Menlo', 'Consolas (Custom)', 'Bitstream Vera Sans Mono', monospace, 'Apple Color Emoji', 'Segoe UI Emoji'`
强调	`'Times New Roman', 'Times', serif`
引用	`'Times New Roman', 'Times', serif`

自定义

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

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

自定义字体

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

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

.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

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

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 变量

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

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

自定义字体粗细

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

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

高级设置

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

.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;
}

上一步暗黑模式

下一步间距

在 GitHub 上编辑此页。

概述

主题

布局

排版

组件

实用工具

排版