字体排版
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-sm 和 text-lg 等实用程序来设置元素的字体大小
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
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/6 和 text-lg/7 等实用程序来同时设置元素的字体大小和行高
所以我开始走进水里。我不会对你们撒谎，我很害怕。但我还是坚持着，当我穿过浪涛时，一种奇怪的平静降临到我身上。我不知道这是否是神圣的干预，还是所有生物的亲缘关系，但我告诉你杰瑞，在那一刻，我就是一名海洋生物学家。
所以我开始走进水里。我不会对你们撒谎，我很害怕。但我还是坚持着，当我穿过浪涛时，一种奇怪的平静降临到我身上。我不知道这是否是神圣的干预，还是所有生物的亲缘关系，但我告诉你杰瑞，在那一刻，我就是一名海洋生物学家。
所以我开始走进水里。我不会对你们撒谎，我很害怕。但我还是坚持着，当我穿过浪涛时，一种奇怪的平静降临到我身上。我不知道这是否是神圣的干预，还是所有生物的亲缘关系，但我告诉你杰瑞，在那一刻，我就是一名海洋生物学家。
<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-height、letter-spacing 和 font-weight 值
@theme { --text-tiny: 0.625rem; --text-tiny--line-height: 1.5rem; --text-tiny--letter-spacing: 0.125rem; --text-tiny--font-weight: 500; }了解有关在 主题文档.
