语义标题元素。
<Heading>The quick brown fox jumps over the lazy dog</Heading>
该组件基于 h1 元素，并支持 常见的 margin 属性.
| 属性 | 类型 | 默认值 |
|---|---|---|
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 属性控制标题的大小。该属性还提供了正确的行高和修正的字母间距——随着文本大小的增加，相对行高和字母间距会减小。
标题大小与 文本 大小一致。但是，行高设置得更紧凑一些，因为标题往往比正文文本更短。
<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 属性修剪文本框开头、结尾或两侧的空白。
该属性的工作原理类似于即将推出的 半前导控制 规范，但使用常见的 负边距解决方法 来实现跨浏览器支持。
<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>
默认修剪值针对 Radix Themes 使用的系统字体栈进行配置。如果您使用的是自定义字体，则可以使用相应的 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 属性在文本溢出其容器时用省略号截断文本。
<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>