我们使用网页应用程序向读者显示文本。网站的设计主要关注文本的放置、大小、粗细和布局。在本课中，我们将了解 Tailwind 如何让我们控制文本的显示。

文本大小

也许我们在网页上注意到文本的第一件事就是它的大小和样式。Tailwind 为每种样式都提供了相应的实用工具类。

文本大小的有效默认值是 .text-base 类，它定义了 CSS 属性 font-size: 1rem 和 line-height: 1.5rem。这意味着 .text-base 的字体大小与页面根元素的字体大小相同，行高是该大小的 1.5 倍。Tailwind 提供了一组实用工具类 .text-{size}，共包含 13 种大小，如下表所示。每一步都定义了一个字体大小和行高。

在下面的实验区中，我们将尝试以下文本大小：

• text-xs
• text-lg
• text-sm

动手试试

尝试用以下属性创建文本样式：

• text-base
• text-2xl
• text-lg hover:text-red-600

1<!-- 文本大小为 base -->
2
3<div class="text-base">
4   The quick brown fox jumps over the lazy dog.
5</div>
6
7<!-- 文本大小为 2xl -->
8
9<div class="text-2xl">
10   The quick brown fox jumps over the lazy dog.
11</div>
12
13<!-- 文本大小为 large -->
14
15<div class="text-lg hover:text-red-600">
16   The quick brown fox jumps over the lazy dog.
17</div>

1<!-- text size as base -->
2
3<div class="text-base">
4   The quick brown fox jumps over the lazy dog.
5</div>
6
7<!-- text size as 2xl -->
8
9<div class="text-2xl">
10   The quick brown fox jumps over the lazy dog.
11</div>
12
13<!-- text size as large -->
14
15<div class="text-lg hover:text-red-600">
16   The quick brown fox jumps over the lazy dog.
17</div>

尝试设计不同文本大小的文本样式。

字体样式

几种不同的 CSS 属性涵盖了我们基本的加粗、斜体和下划线字体样式。但从 Tailwind 的角度来看，这些样式只是实用工具类——.italic、.not-italic、.underline 和 .no-underline。我们只有在希望文本在不同状态下具有不同特征时才使用 .not-italic 和 .no-underline。这通常与不同屏幕尺寸下的响应式行为相关。

字体类

对于加粗字体，CSS 提供了九个粗细等级，100–900，其中正常文本为 400。Tailwind 提供了九个不同的实用工具类，每个等级对应一个：

• .font-hairline
• .font-thin
• .font-light
• .font-normal
• .font-medium
• .font-semibold
• .font-bold
• .font-extrabold
• .font-black

我们将在下面的实验区中尝试以下不同的字体样式类：

• .font-hairline
• .font-thin
• .font-extrabold

动手试试

尝试用以下属性创建文本样式：

• font-light
• font-medium
• font-semibold
• font-bold

将文本大小设置为以下属性：

• text-base
• text-2xl
• text-lg

1
2<!-- 字体样式为 light，文本大小为 base -->
3
4<div class="font-light text-base">
5   The quick brown fox jumps over the lazy dog.
6</div>
7
8<!-- 字体样式为 medium，文本大小为 2xl -->
9
10<div class="font-medium text-2xl">
11   The quick brown fox jumps over the lazy dog.
12</div>
13
14<!-- 应用字体样式为 semibold，文本大小为 large -->
15
16<div class="font-semibold text-lg">
17   The quick brown fox jumps over the lazy dog.
18</div>
19
20<!-- 应用字体样式为 bold，文本大小为 2xl -->
21
22<div class="font-bold text-2xl">
23   The quick brown fox jumps over the lazy dog.
24</div>

1
2<!-- font style as light with text size as base -->
3
4<div class="font-light text-base">
5   The quick brown fox jumps over the lazy dog.
6</div>
7
8<!-- font style as medium with text size as 2xl -->
9
10<div class="font-medium text-2xl">
11   The quick brown fox jumps over the lazy dog.
12</div>
13
14<!-- apply the font style as semibold with text size as large -->
15
16<div class="font-semibold text-lg">
17   The quick brown fox jumps over the lazy dog.
18</div>
19
20<!-- apply the font style as bold with text size as 2xl -->
21
22<div class="font-bold text-2xl">
23   The quick brown fox jumps over the lazy dog.
24</div>

注意：你也可以尝试字体类表中提到的其他字体样式。

并非所有字体在所有字重下都有明显差异，但常用的网络字体应该具备。Tailwind 不使用 .font-weight-100。我们可以通过更改配置来实现这一点。

我们还可能希望确保文本的大小写。例如，我们可能希望标题全部大写。Tailwind 提供了四个用于大小写的实用工具类，它们用于包装 CSS 的 text-transform 属性，以提供与实用工具名称描述的行为一致的效果：

• .uppercase
• .lowercase
• .capitalize
• .normal-case

设计目标

我们可以开始为实际的标题构建样式。这是流行 CSS 框架的标题和副标题默认样式的示例：

1<h1>Title</h1>
2<h2>Subtitle</h2>

这为我们提供了一个半粗体标题，大小为 1.875rem（30 点），行高为 2.25rem（36 点），以及一个大小为 1.25rem（20 点）的副标题，正常字重，行高为 1.75rem。以下是定义标题和副标题的一些示例：

1<h1>Title</h1>
2<h2>Subtitle</h2>
3<h3>Header</h3>

这返回了一个稍显加粗且更大的标题和副标题。它还返回一个斜体的三级标题，比常规文本稍大且更粗。我们还可以在标题周围添加一些间距。

Tailwind 的重置样式允许 h1、h2 等标签没有默认样式。因此，使用这些标签配合 Tailwind 只是一种语义上的说明，表示文本是某种类型的标题。它不会产生任何样式效果。

现在，你可能会想，每次想要标题时都要输入 text-lg font-medium italic 是否合理？让我们尝试在 Ruby on Rails 项目中实现这些类，并探索输出结果。

注意：有关如何在 Tailwind 中管理重复内容的更多信息，请参阅后续关于「重复」的课时。