排版

使用和调整排版的指南。

基本组件

使用文本和标题组件渲染标题和正文内容。这些组件共享 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 步的 大小 缩放。每一步都有相应的字体大小、行高和字间距值，这些值都设计为组合使用。

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 上编辑此页面。

概述

主题

布局

排版

组件

实用程序

排版

排版原则