排版

使用和调整排版的指导。

基础组件

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

排版原则

排版的目标是以成比例的方式将字体大小、行高和行宽结合起来，以最大化美感，使阅读变得更容易和愉悦。

<Heading mb="2" size="4">排版原则</Heading>
<Text>排版的目标是以成比例的方式将字体大小、行高和行宽结合起来，以最大化美感，使阅读变得更容易和愉悦。</Text>

格式化组件

组合格式化组件以添加强调、信号重要性、展示代码等。

最重要的事情是， 保持积极。

<Text>
	最<Em>重要</Em>的事情是，{" "}
	<Strong>保持积极</Strong>。
</Text>

字体比例

排版系统基于 9 步 size 比例。每一步都有对应的字体大小、行高和字母间距值，所有这些值都旨在组合使用。

快速棕色狐狸跳过懒狗。

<Text size="6">快速棕色狐狸跳过懒狗。</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`

字体粗细

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

轻常规中等粗

<Text size="6">
	<Flex direction="column">
		<Text weight="light">轻</Text>
		<Text weight="regular">常规</Text>
		<Text weight="medium">中等</Text>
		<Text weight="bold">粗</Text>
	</Flex>
</Text>

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

字体系列

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

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`

自定义

Radix Themes 的排版可以通过覆盖对应的 CSS 变量来自定义。请参考源代码查看完整的排版代币列表。

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

自定义字体

您可以提供自己的字体，然而，您如何选择导入和服务它们由您决定。只需使用正确的语法指定您的命名字体即可。

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

.radix-themes {
	--default-font-family:  /* 您的自定义默认字体 */ --heading-font-family:
		/* 您的 <Heading> 组件的自定义字体 */ --code-font-family:
		/* 您的 <Code> 组件的自定义字体 */ --strong-font-family:
		/* 您的 <Strong> 组件的自定义字体 */ --em-font-family:
		/* 您的 <Em> 组件的自定义字体 */ --quote-font-family:
		/* 您的 <Quote> 组件的自定义字体 */;
}

使用 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;
}

上一篇深色模式 Dark mode

下一篇间距 Spacing

在 GitHub 上编辑此页面

概览 Overview

主题 Theme

布局 Layout

排版

组件

通用工具 Utilities

排版

排版原则