排版

font-size

用于控制元素字体大小的工具类。

快速参考

类	属性
`text-xs`	`font-size: var(--text-xs); /* 0.75rem (12px) / line-height: var(--text-xs--line-height); / calc(1 / 0.75) */`
`text-sm`	`font-size: var(--text-sm); /* 0.875rem (14px) / line-height: var(--text-sm--line-height); / calc(1.25 / 0.875) */`
`text-base`	`font-size: var(--text-base); /* 1rem (16px) / line-height: var(--text-base--line-height); / calc(1.5 / 1) */`
`text-lg`	`font-size: var(--text-lg); /* 1.125rem (18px) / line-height: var(--text-lg--line-height); / calc(1.75 / 1.125) */`
`text-xl`	`font-size: var(--text-xl); /* 1.25rem (20px) / line-height: var(--text-xl--line-height); / calc(1.75 / 1.25) */`
`text-2xl`	`font-size: var(--text-2xl); /* 1.5rem (24px) / line-height: var(--text-2xl--line-height); / calc(2 / 1.5) */`
`text-3xl`	`font-size: var(--text-3xl); /* 1.875rem (30px) / line-height: var(--text-3xl--line-height); / calc(2.25 / 1.875) */`
`text-4xl`	`font-size: var(--text-4xl); /* 2.25rem (36px) / line-height: var(--text-4xl--line-height); / calc(2.5 / 2.25) */`
`text-5xl`	`font-size: var(--text-5xl); /* 3rem (48px) / line-height: var(--text-5xl--line-height); / 1 */`
`text-6xl`	`font-size: var(--text-6xl); /* 3.75rem (60px) / line-height: var(--text-6xl--line-height); / 1 */`
`text-7xl`	`font-size: var(--text-7xl); /* 4.5rem (72px) / line-height: var(--text-7xl--line-height); / 1 */`
`text-8xl`	`font-size: var(--text-8xl); /* 6rem (96px) / line-height: var(--text-8xl--line-height); / 1 */`
`text-9xl`	`font-size: var(--text-9xl); /* 8rem (128px) / line-height: var(--text-9xl--line-height); / 1 */`
`text-(length:<custom-property>)`	`font-size: var(<custom-property>);`
`text-[<value>]`	`font-size: <value>;`

示例

基础示例

使用 text-sm 和 text-lg 等工具类来设置元素的字体大小：

text-sm

The quick brown fox jumps over the lazy dog.

text-base

The quick brown fox jumps over the lazy dog.

text-lg

The quick brown fox jumps over the lazy dog.

text-xl

The quick brown fox jumps over the lazy dog.

text-2xl

The quick brown fox jumps over the lazy dog.

html

<!-- [!code classes:text-sm,text-base,text-lg,text-xl,text-2xl] -->
<p class="text-sm ...">The quick brown fox ...</p>
<p class="text-base ...">The quick brown fox ...</p>
<p class="text-lg ...">The quick brown fox ...</p>
<p class="text-xl ...">The quick brown fox ...</p>
<p class="text-2xl ...">The quick brown fox ...</p>

设置行高

使用 text-sm/6 和 text-lg/7 等工具类，可同时设置元素的字体大小和行高：

text-sm/6

So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.

text-sm/7

So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.

text-sm/8

So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.

html

<!-- [!code classes:text-sm/6,text-sm/7,text-sm/8] -->
<p class="text-sm/6 ...">So I started to walk into the water...</p>
<p class="text-sm/7 ...">So I started to walk into the water...</p>
<p class="text-sm/8 ...">So I started to walk into the water...</p>

使用自定义值

使用 text-[<value>] 等工具类，可根据完全自定义的值设置字体大小：

html

<p class="text-[14px] ...">
 Lorem ipsum dolor sit amet...
</p>

对于 CSS 变量，也可以使用 text-(length:<custom-property>) 语法：

html

<p class="text-(length:--my-text-size) ...">
 Lorem ipsum dolor sit amet...
</p>

这只是 text-[length:var(<custom-property>)] 的简写，会自动为你加上 var() 函数。

响应式设计

使用 md: 等断点变体前缀，即可让 font-size 工具类仅在中等及以上屏幕尺寸下生效：

html

<p class="text-sm md:text-base ...">
 Lorem ipsum dolor sit amet...
</p>

在变体文档中了解更多关于使用变体的信息。

自定义主题

使用 --text-* 主题变量来自定义项目中的字体大小工具类：

css

@theme {
  --text-tiny: 0.625rem;
}

现在可以在标记中使用 text-tiny 工具类：

html

<div class="text-tiny">
 <!-- ... -->
</div>

你也可以为字体大小提供默认的 line-height、letter-spacing 和 font-weight 值：

css

@theme {
  --text-tiny: 0.625rem;
  --text-tiny--line-height: 1.5rem; 
  --text-tiny--letter-spacing: 0.125rem; 
  --text-tiny--font-weight: 500; 
}

在主题文档中了解更多关于自定义主题的信息。