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-(length:<custom-property>)
font-size: var(<custom-property>);
text-[<value>]
font-size: <value>;

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

使用 text-smtext-lg 等工具设置元素的字体大小:

¥Use utilities like text-sm and text-lg to set the font size of an element:

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>

设置行高(Setting the line-height)

¥Setting the line-height

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

¥Use utilities like text-sm/6 and text-lg/7 to set the font size and line-height of an element at the same time:

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.

<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>

使用自定义值(Using a custom value)

¥Using a custom value

使用 text-[<value>] 语法 根据完全自定义的值设置 font size

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

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

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

这只是简写,用于 text-[length:var(<custom-property>)] 它会自动为你添加 var() 函数。

响应式设计(Responsive design)

¥Responsive design

font-size 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具:

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

请参阅 变体文档 详细了解如何使用变体。

自定义主题(Customizing your theme)

¥Customizing your theme

使用 --text-* 主题变量来自定义项目中的 font size 工具:

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

现在 text-tiny 工具可用于你的标记:

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

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

¥You can also provide default line-height, letter-spacing, and font-weight values for a font size:

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

在此详细了解如何自定义主题: 主题文档

TailwindCSS v4.0 中文网 - 粤ICP备13048890号