字体排印
用于控制元素字体大小的实用工具。
| 类名 | 样式 |
|---|---|
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 的实用工具来设置元素的字体大小
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 的实用工具来同时设置元素的字体大小和行高
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.
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.
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.
<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>] 语法 来设置字体大小基于完全自定义的值
<p class="text-[14px] ..."> Lorem ipsum dolor sit amet...</p>对于 CSS 变量，你也可以使用 text-(length:<custom-property>) 语法
<p class="text-(length:--my-text-size) ..."> Lorem ipsum dolor sit amet...</p>这只是 text-[lengthvar(<custom-property>)] 的简写形式，它会自动为你添加 var() 函数。
前缀一个 font-size 实用工具 带有像 md: 这样的断点变体，以便仅在中等 屏幕尺寸及以上尺寸应用该实用工具
<p class="text-sm md:text-base ..."> Lorem ipsum dolor sit amet...</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; }了解更多关于在 主题文档.