语义化的标题元素。
<Heading>The quick brown fox jumps over the lazy dog</Heading>
此组件基于 h1 元素，并支持通用外边距属性。
| 属性 | 类型 | 默认值 |
|---|---|---|
as | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "h1" |
asChild | boolean | 无默认值 |
size | Responsive<enum> | "6" |
weight | Responsive<"light" | "regular" | "medium" | "bold"> | 无默认值 |
align | Responsive<"left" | "center" | "right"> | 无默认值 |
trim | Responsive<"normal" | "start" | "end" | "both"> | 无默认值 |
truncate | boolean | 无默认值 |
wrap | Responsive<"wrap" | "nowrap" | "pretty" | "balance"> | 无默认值 |
color | enum | 无默认值 |
highContrast | boolean | 无默认值 |
使用 as 属性更改标题级别。此属性纯粹是语义化的，不会更改视觉外观。
<Heading as="h1">Level 1</Heading>
<Heading as="h2">Level 2</Heading>
<Heading as="h3">Level 3</Heading>
使用 size 属性控制标题的尺寸。此属性还提供正确的行高和校正性的字母间距——随着文本尺寸的增加，相对行高和字母间距会减小。
标题尺寸与 Text 尺寸匹配。但是，行高设置得更紧凑一些，因为标题往往比正文文本短。
<Flex direction="column" gap="3">
<Heading size="1">The quick brown fox jumps over the lazy dog</Heading>
<Heading size="2">The quick brown fox jumps over the lazy dog</Heading>
<Heading size="3">The quick brown fox jumps over the lazy dog</Heading>
<Heading size="4">The quick brown fox jumps over the lazy dog</Heading>
<Heading size="5">The quick brown fox jumps over the lazy dog</Heading>
<Heading size="6">The quick brown fox jumps over the lazy dog</Heading>
<Heading size="7">The quick brown fox jumps over the lazy dog</Heading>
<Heading size="8">The quick brown fox jumps over the lazy dog</Heading>
<Heading size="9">The quick brown fox jumps over the lazy dog</Heading>
</Flex>
使用 weight 属性设置文本粗细。
<Heading weight="regular">
The quick brown fox jumps over the lazy dog.
</Heading>
<Heading weight="medium">
The quick brown fox jumps over the lazy dog.
</Heading>
<Heading weight="bold">
The quick brown fox jumps over the lazy dog.
</Heading>
使用 align 属性设置文本对齐方式。
<Heading align="left">Left-aligned</Heading>
<Heading align="center">Center-aligned</Heading>
<Heading align="right">Right-aligned</Heading>
使用 trim 属性修剪文本框开头、结尾或两侧的前导空格。
此属性的工作方式类似于即将推出的 half-leading control 规范，但使用通用的 负边距解决方法 在底层实现跨浏览器支持。
<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)",
}}
>
Without trim
</Heading>
<Heading
trim="both"
style={{
background: "var(--gray-a2)",
borderTop: "1px dashed var(--gray-a7)",
borderBottom: "1px dashed var(--gray-a7)",
}}
>
With trim
</Heading>
</Flex>
在调整卡片或其他“盒状”组件中的垂直间距时，修剪前导空格非常有用。否则，上下内边距看起来比侧面大。
<Flex direction="column" gap="3">
<Box
style={{
background: "var(--gray-a2)",
border: "1px dashed var(--gray-a7)",
}}
p="4"
>
<Heading mb="1" size="3">
Without trim
</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>
</Box>
<Box
p="4"
style={{
background: "var(--gray-a2)",
border: "1px dashed var(--gray-a7)",
}}
>
<Heading mb="1" size="3" trim="start">
With trim
</Heading>
<Text trim="end">
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>
</Box>
</Flex>
默认的 trim 值是为 Radix Themes 使用的系统字体堆栈配置的。如果您使用自定义字体，则可以使用相应的 CSS 变量调整 trim 值。
.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 属性在文本溢出其容器时使用省略号截断文本。
<Flex maxWidth="300px">
<Heading truncate>The quick brown fox jumps over the lazy dog</Heading>
</Flex>
使用 wrap 属性控制文本换行。
<Flex maxWidth="300px">
<Heading wrap="nowrap">The quick brown fox jumps over the lazy dog</Heading>
</Flex>
<Flex maxWidth="300px">
<Heading wrap="balance">The quick brown fox jumps over the lazy dog</Heading>
</Flex>
<Flex maxWidth="300px">
<Heading wrap="pretty">The quick brown fox jumps over the lazy dog</Heading>
</Flex>
text-wrap: pretty 是一个实验性值，它 尚未在所有浏览器中得到支持。但是，它可以被视为对支持它的浏览器的渐进增强。
使用 color 属性分配特定的颜色。文本颜色旨在在常见背景颜色上实现至少 Lc 60 APCA 对比度。
<Flex direction="column">
<Heading color="indigo">The quick brown fox jumps over the lazy dog</Heading>
<Heading color="cyan">The quick brown fox jumps over the lazy dog</Heading>
<Heading color="orange">The quick brown fox jumps over the lazy dog</Heading>
<Heading color="crimson">The quick brown fox jumps over the lazy dog</Heading>
</Flex>
使用 highContrast 属性增加与背景的颜色对比度。
<Flex direction="column">
<Heading color="gray">The quick brown fox jumps over the lazy dog.</Heading>
<Heading color="gray" highContrast>
The quick brown fox jumps over the lazy dog.
</Heading>
</Flex>