1. 字体排版
  2. font-size

字体排版

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-(长度:<自定义属性>)
font-size: var(<自定义属性>);
text-[<值>]
font-size: <值>;

示例

基本示例

使用 text-smtext-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.

<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/6text-lg/7 等实用程序来同时设置元素的字体大小和行高

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-[<值>] 语法 来设置字体大小基于完全自定义的值

<p class="text-[14px] ...">  <!-- ... --></p>

对于 CSS 变量,您还可以使用 text-(长度:<自定义属性>) 语法

<p class="text-(length:--my-text-size) ...">  <!-- ... --></p>

这只是 text-[长度var(<自定义属性>)] 的简写形式,会自动为您添加 var() 函数。

响应式设计

前缀 font-size 实用程序 添加一个断点变体,如 md:,以便仅在中等 屏幕尺寸及以上时应用该实用程序

<p class="text-sm md:text-base ...">  <!-- ... --></p>

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

自定义主题

使用 --text-* 主题变量来自定义项目中的字体大小 实用程序

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

现在,可以在您的标记中使用 text-tiny 实用程序

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

您还可以为字体大小提供默认的 line-heightletter-spacingfont-weight

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

了解有关在 主题文档.

版权所有 © 2025 Tailwind Labs Inc.·商标政策