文本
同时设置字号、行高和字距的文本样式。
本页内容
类
| 类 | 声明 |
|---|---|
text-<name> | font-size: var(--text-<name>);line-height: var(--text-<name>--line-height, normal);letter-spacing: var(--text-<name>--letter-spacing, normal); |
主要的 --text-<name> 令牌创建类；其 --line-height 和 --letter-spacing 配套令牌可选，未提供时使用 normal。字体族、字重和颜色仍由独立类设置。
值
每行显示一个类读取的三个值。预设字号引用对应的 font-size 令牌，表格则解析该引用以便阅读。所有预设文本样式都包含两个配套令牌。
| 类 | 大小 | 行高 | 字距 |
|---|---|---|---|
text-3xs | .5rem8px | 1.5 | 0 |
text-2xs | .625rem10px | 1.5 | 0 |
text-xs | .75rem12px | 1.5 | 0 |
text-sm | .875rem14px | 1.5 | 0 |
text-md | 1rem16px | 1.6 | 0 |
text-lg | 1.125rem18px | 1.5 | 0 |
text-xl | 1.25rem20px | 1.4 | -.01em |
text-2xl | 1.5rem24px | 1.35 | -.015em |
text-3xl | 2rem32px | 1.25 | -.02em |
text-4xl | 2.25rem36px | 1.2 | -.025em |
text-5xl | 2.5rem40px | 1.15 | -.03em |
text-6xl | 3rem48px | 1.1 | -.035em |
text-7xl | 3.75rem60px | 1.05 | -.04em |
text-8xl | 4.5rem72px | 1.05 | -.04em |
text-9xl | 6rem96px | 1 | -.045em |
text-10xl | 8rem128px | 1 | -.05em |
比较全部文本样式
text-3xstext-2xstext-xstext-smtext-mdtext-lgtext-xltext-2xltext-3xltext-4xltext-5xltext-6xltext-7xltext-8xltext-9xltext-10xl一个主要令牌，三个声明
--text-card 注册 text-card。这个类始终输出字号、行高和字距。如果没有 --text-card--line-height 或 --text-card--letter-spacing，对应声明就使用 normal，不会保留继承的值。
文本样式始终设置三个属性
这里只定义主要的 --text-card 令牌。两个配套声明仍然存在并使用 normal，替换任何继承的行高或字距。
文字说明
- 自定义主题将 --text-card 定义为 1.5rem，未定义任何配套令牌。
- text-card 输出 font-size: var(--text-card)、line-height: var(--text-card--line-height, normal) 和 letter-spacing: var(--text-card--letter-spacing, normal)。
- 三条实线分支都代表会输出的声明。缺失的配套值使用 normal 回退值，而不是继承其他行高或字距。
- 单独的配套令牌不会注册 text-card。字体族、字重和颜色都不属于这个组合样式。
只有配套令牌不会注册文本样式。即使只想自定义行高或字距，也必须添加主要的字号令牌。
配套令牌是这个组合样式使用的值，不是另一个类名。需要独立调整时，请使用 font-<size>、leading-<name> 或 tracking-<name>。条件相同时，这些单属性工具类排在文本组合样式之后，可覆盖对应声明；class 属性中的顺序不会决定结果。
这个组合样式不会加载字体、选择字体族或字重、添加外边距，或决定段落宽度。如何选择并组合文本样式来建立层次，见文字排版指南。
用法
为段落应用一组文本样式，字体族、字重和颜色仍可独立设置。
A paragraph keeps its size, line height and letter spacing together. Its container can grow when the same text wraps onto another line.
<p class="… text-lg">A paragraph keeps its size,…</p>生成的 CSS
@layer theme { :root, :host { --font-size-lg: 1.125rem; --text-lg: var(--font-size-lg); --text-lg--line-height: 1.5; --text-lg--letter-spacing: 0 }}@layer utilities { .text-lg { font-size: var(--text-lg); line-height: var(--text-lg--line-height, normal); letter-spacing: var(--text-lg--letter-spacing, normal) }}自定义
添加文本样式及其配套令牌：--text-display 会创建 text-display。
@theme { --text-display: 3.5rem; --text-display--line-height: 1.1; --text-display--letter-spacing: -.03em;}生成的 CSS
@layer theme { :root, :host { --text-display: 3.5rem; --text-display--line-height: 1.1; --text-display--letter-spacing: -.03em }}@layer utilities { .text-display { font-size: var(--text-display); line-height: var(--text-display--line-height, normal); letter-spacing: var(--text-display--letter-spacing, normal) }}