# 标题

语义标题元素。

```jsx
<Heading>敏捷的棕色狐狸跳过了懒狗</Heading>
```

## [API 参考](#api-参考)

此组件基于 `h1` 元素，支持 [常见的边距属性](/themes/docs/overview/layout#margin-props)。

| Prop           | Type                                                      | Default          |
| -------------- | --------------------------------------------------------- | ---------------- |
| `as`           | `"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"`            | `"h1"`           |
| `asChild`      | `boolean`                                                 | No default value |
| `size`         | `Responsive<enum>`                                        | `"6"`            |
| `weight`       | `Responsive<"light" \| "regular" \| "medium" \| "bold">`  | No default value |
| `align`        | `Responsive<"left" \| "center" \| "right">`               | No default value |
| `trim`         | `Responsive<"normal" \| "start" \| "end" \| "both">`      | No default value |
| `truncate`     | `boolean`                                                 | No default value |
| `wrap`         | `Responsive<"wrap" \| "nowrap" \| "pretty" \| "balance">` | No default value |
| `color`        | `enum`                                                    | No default value |
| `highContrast` | `boolean`                                                 | No default value |

## [示例](#示例)

### [作为另一个元素](#作为另一个元素)

使用 `as` 属性来改变标题级别。这个属性纯粹是语义上的，不会改变视觉外观。

```jsx
<Heading as="h1">级别 1</Heading>

<Heading as="h2">级别 2</Heading>

<Heading as="h3">级别 3</Heading>
```

### [尺寸](#尺寸)

使用 `size` 属性来控制标题的大小。该属性还提供正确的行高和纠正的字母间距——随着文本大小的增加，相对的行高和字母间距会减小。

标题大小与 [文本](/themes/components/text) 大小相匹配。 然而，由于标题通常比普通文本短，因此行高设置得稍微紧凑一些。

```jsx
<Flex direction="column" gap="3">
  <Heading size="1">敏捷的棕色狐狸跳过了懒狗</Heading>

  <Heading size="2">敏捷的棕色狐狸跳过了懒狗</Heading>

  <Heading size="3">敏捷的棕色狐狸跳过了懒狗</Heading>

  <Heading size="4">敏捷的棕色狐狸跳过了懒狗</Heading>

  <Heading size="5">敏捷的棕色狐狸跳过了懒狗</Heading>

  <Heading size="6">敏捷的棕色狐狸跳过了懒狗</Heading>

  <Heading size="7">敏捷的棕色狐狸跳过了懒狗</Heading>

  <Heading size="8">敏捷的棕色狐狸跳过了懒狗</Heading>

  <Heading size="9">敏捷的棕色狐狸跳过了懒狗</Heading>
</Flex>
```

### [字重](#字重)

使用 `weight` 属性来设置文本的字重。

```jsx
<Heading weight="regular">

  敏捷的棕色狐狸跳过了懒狗。

</Heading>



<Heading weight="medium">

  敏捷的棕色狐狸跳过了懒狗。

</Heading>



<Heading weight="bold">

  敏捷的棕色狐狸跳过了懒狗。

</Heading>
```

### [对齐](#对齐)

使用 `align` 属性来设置文本对齐方式。

```jsx
<Heading align="left">左对齐</Heading>

<Heading align="center">居中对齐</Heading>

<Heading align="right">右对齐</Heading>
```

### [修剪](#修剪)

使用 `trim` 属性来修剪文本框开始、结束或两侧的前导空间。

该属性的工作方式类似于即将发布的 [半行距控制](https://www.w3.org/TR/css-inline-3/#leading-trim) 规范，但在底层使用了常见的 [负边距解决方案](https://seek-oss.github.io/capsize/) 以支持跨浏览器兼容性。

```jsx
<Flex direction="column" gap="3">
  <Heading
    trim="normal"
    style={{
      background: "var(--gray-a2)",
      borderTop: "1px dashed var(--gray-a7)",
      borderBottom: "1px dashed var(--gray-a7)",
    }}
  >
    未修剪
  </Heading>

  <Heading
    trim="both"
    style={{
      background: "var(--gray-a2)",
      borderTop: "1px dashed var(--gray-a7)",
      borderBottom: "1px dashed var(--gray-a7)",
    }}
  >
    已修剪
  </Heading>
</Flex>
```

修剪前导空间在调整卡片或其他“盒状”组件的垂直间距时非常有用。否则，内边距看起来上面和下面比两侧大。

```jsx
<Flex direction="column" gap="3">
  <Box
    style={{
      background: "var(--gray-a2)",
      border: "1px dashed var(--gray-a7)",
    }}
    p="4"
  >
    <Heading mb="1" size="3">
      未修剪
    </Heading>

    <Text>
      排版的目标是以比例的方式使字体大小、行高和行宽相互关联， 从而最大化美感，使阅读更容易和愉快。
    </Text>
  </Box>

  <Box
    p="4"
    style={{
      background: "var(--gray-a2)",
      border: "1px dashed var(--gray-a7)",
    }}
  >
    <Heading mb="1" size="3" trim="start">
      已修剪
    </Heading>

    <Text trim="end">
      排版的目标是以比例的方式使字体大小、行高和行宽相互关联， 从而最大化美感，使阅读更容易和愉快。
    </Text>
  </Box>
</Flex>
```

默认的修剪值是为 Radix 主题所使用的系统字体栈配置的。如果您使用自定义字体，您可以 [调整](/themes/docs/theme/typography#customization) 修剪值，使用相应的 CSS 变量。

```css
.radix-themes {
  --default-leading-trim-start: 0.42em;

  --default-leading-trim-end: 0.36em;

  --heading-leading-trim-start: 0.42em;

  --heading-leading-trim-end: 0.36em;
}
```

### [截断](#截断)

使用 `truncate` 属性在文本溢出其容器时用省略号截断文本。

```jsx
<Flex maxWidth="300px">
  <Heading truncate>敏捷的棕色狐狸跳过了懒狗</Heading>
</Flex>
```

### [包裹](#包裹)

使用 `wrap` 属性来控制文本是否换行。

```jsx
<Flex maxWidth="300px">
  <Heading wrap="nowrap">敏捷的棕色狐狸跳过了懒狗</Heading>
</Flex>
```

```jsx
<Flex maxWidth="300px">
  <Heading wrap="balance">敏捷的棕色狐狸跳过了懒狗</Heading>
</Flex>
```

```jsx
<Flex maxWidth="300px">
  <Heading wrap="pretty">敏捷的棕色狐狸跳过了懒狗</Heading>
</Flex>
```

`text-wrap: pretty` 是一个实验值，目前<!-- --> [尚未支持所有浏览器](https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap#browser_compatibility)。然而，它可以被视为支持此功能的浏览器的渐进式增强。

### [颜色](#颜色)

使用 `color` 属性分配一个特定的 [颜色](/themes/docs/theme/color)。文本颜色旨在实现与常见背景颜色至少 Lc 60 APCA 的对比度。

```jsx
<Flex direction="column">
  <Heading color="indigo">敏捷的棕色狐狸跳过了懒狗</Heading>

  <Heading color="cyan">敏捷的棕色狐狸跳过了懒狗</Heading>

  <Heading color="orange">敏捷的棕色狐狸跳过了懒狗</Heading>

  <Heading color="crimson">敏捷的棕色狐狸跳过了懒狗</Heading>
</Flex>
```

### [高对比度](#高对比度)

使用 `highContrast` 属性增加与背景的颜色对比度。

```jsx
<Flex direction="column">
  <Heading color="gray">敏捷的棕色狐狸跳过了懒狗。</Heading>

  <Heading color="gray" highContrast>
    敏捷的棕色狐狸跳过了懒狗。
  </Heading>
</Flex>
```

<!--$-->

<!--/$-->