基本文本和字体样式

在本文中，我们将带你踏上掌握 CSS 文本样式的旅程。我们将详细介绍文本/字体样式的所有基本要素，包括设置字体粗细、字体系列和样式、字体速记、文本对齐和其他效果，以及行距和字距。

预备知识	使用 HTML 构建内容和 CSS 样式基础。
学习成果	理解字体系列、字体堆栈和网页安全字体的概念。设置字体颜色、粗细、大小和样式。设置文本对齐、转换和装饰。设置行高。了解还有其他几种字体和文本样式属性，并鼓励探索它们。

CSS 文本样式涉及哪些内容？

元素内的文本在元素的内容框内布局。它从内容区域的左上角开始（如果内容是 RTL 语言，则从右上角开始），并向行尾流动。一旦到达行尾，它会向下移动到下一行并再次流向行尾。此模式重复，直到所有内容都放置在框中。文本内容实际上表现为一系列内联元素，彼此相邻地排列在行中，直到到达行尾，或者除非你使用 <br> 元素手动强制换行，否则不会创建换行符。

注意： 如果上面的段落让你感到困惑，那没关系——回去复习我们的盒模型文章，在继续之前复习一下盒模型理论。

用于样式化文本的 CSS 属性通常分为两类，我们将在本文中分别讨论

字体样式：影响文本字体的属性，例如，应用哪种字体、字体大小以及是否加粗、斜体等。
文本布局样式：影响文本间距和其他布局特征的属性，例如，允许操作行和字母之间的间距，以及文本在内容框中的对齐方式。

注意： 请记住，元素内的文本作为一个整体受到影响。你不能选择和样式化文本的子部分，除非你将它们包装在适当的元素中（例如 <span> 或 <strong>），或者使用文本特定的伪元素，如 ::first-letter（选择元素文本的第一个字母）、::first-line（选择元素文本的第一行）或 ::selection（选择当前被光标高亮的文本）。

字体

让我们直接来看一下样式化字体的属性。在这个例子中，我们将对以下 HTML 示例应用一些 CSS 属性

html

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago…</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>

字体系列

要为文本设置不同的字体，你使用 font-family 属性——这允许你为浏览器指定一个字体（或字体列表）以应用于选定的元素。浏览器只有在访问网站的机器上可用时才会应用字体；如果不可用，它将只使用浏览器默认字体。一个简单的示例如下所示

css

p {
  font-family: "Arial";
}

这将使页面上的所有段落都采用 Arial 字体，该字体在任何计算机上都可以找到。

注意： Scrimba 的网页安全字体 ^{MDN 学习伙伴} scrim 提供了一个交互式指南，解释了字体的重要性、网页安全字体以及如何在 CSS 中指定字体——以及一个测试你知识的挑战。

网页安全字体

谈到字体可用性，只有一定数量的字体在所有系统上普遍可用，因此可以放心地使用。这些就是所谓的网页安全字体。

大多数时候，作为网页开发者，我们希望对用于显示文本内容的字体有更具体的控制。问题在于如何知道我们的网页在用户的计算机上可以使用哪些字体。在所有情况下，我们都无法知道这一点，但网页安全字体已知在大多数常用操作系统（Windows、macOS、最常见的 Linux 发行版、Android 和 iOS）上都可用。

实际的网页安全字体列表会随着操作系统的发展而变化，但至少目前可以合理地将以下字体视为网页安全字体（其中许多字体因微软在 90 年代末和 2000 年代初的 Web 核心字体 倡议而普及）

名称	通用类型	注意
Arial	sans-serif	通常认为，将 Helvetica 作为 Arial 的首选替代字体是一个最佳实践，因为尽管它们的字体面几乎相同，但 Helvetica 被认为具有更好的形状，即使 Arial 的可用性更广。
Courier New	monospace	有些操作系统有一个 Courier New 字体的替代版本（可能更旧），称为 Courier。最佳实践是同时使用这两种字体，将 Courier New 作为首选替代字体。
Georgia	serif
Times New Roman	serif	有些操作系统有一个 Times New Roman 字体的替代版本（可能更旧），称为 Times。最佳实践是同时使用这两种字体，将 Times New Roman 作为首选替代字体。
Trebuchet MS	sans-serif	使用这种字体时应小心——它在移动操作系统上并不广泛可用。
Verdana	sans-serif

注意： 在各种资源中，cssfontstack.com 网站维护着一个在 Windows 和 macOS 操作系统上可用的网页安全字体列表，这可以帮助你决定哪些字体对你的使用是安全的。

注意： 有一种方法可以随网页下载自定义字体，让你以任何你想要的方式自定义字体使用：网页字体。这稍微复杂一些，我们将在模块后面的另一篇文章中讨论。

默认字体

CSS 为字体定义了五个通用名称：serif、sans-serif、monospace、cursive 和 fantasy。这些名称非常通用，从这些通用名称使用的确切字体面可能因每个浏览器和显示它们的每个操作系统而异。它代表了一种最坏的情况，浏览器将尽力提供一种看起来合适的字体。serif、sans-serif 和 monospace 相当可预测，应该会提供合理的结果。另一方面，cursive 和 fantasy 不太可预测，我们建议非常谨慎地使用它们，并随用随测。

这五个名称定义如下

术语	定义	示例
`serif`	带有衬线（在某些字体中，笔画末端看到的装饰和其他小细节）的字体。	`My big red elephant` `body { font-family: serif; }`
`sans-serif`	没有衬线的字体。	`My big red elephant` `body { font-family: sans-serif; }`
`monospace`	每个字符宽度相同的字体，通常用于代码列表。	`My big red elephant` `body { font-family: monospace; }`
`cursive`	旨在模仿手写字体的字体，具有流畅的连笔。	`My big red elephant` `body { font-family: cursive; }`
`fantasy`	旨在具有装饰性的字体。	`My big red elephant` `body { font-family: fantasy; }`

字体堆栈

由于你无法保证网页上要使用的字体可用（即使是网页字体也可能因某种原因失败），你可以提供一个字体堆栈，以便浏览器有多种字体可供选择。这涉及到 font-family 值，该值由逗号分隔的多个字体名称组成，例如：

css

p {
  font-family: "Trebuchet MS", "Verdana", sans-serif;
}

在这种情况下，浏览器从列表的开头开始，查看该字体是否在机器上可用。如果可用，它将该字体应用于选定的元素。如果不可用，它会转到下一个字体，依此类推。

在字体堆栈的末尾提供一个合适的通用字体名称是一个好主意，这样，如果没有列出的任何字体可用，浏览器至少可以提供一个大致合适的字体。为了强调这一点，如果没有任何其他选项可用，段落将获得浏览器默认的衬线字体——这通常是 Times New Roman——这对于无衬线字体来说是不可取的！

注意： 虽然你可以使用包含空格的字体系列名称，例如 Trebuchet MS，而无需引用名称，但为了避免转义错误，建议引用包含空格、数字或除连字符以外的标点符号的字体系列名称。

警告： 任何可能被误解为通用系列名称或 CSS 范围关键字的字体系列名称都必须加引号。虽然字体系列名称可以作为 <custom-ident> 或 <string> 包含，但与 CSS 范围属性值（如 initial 或 inherit）相同或与通用字体系列名称（如 sans-serif 或 fantasy）相同的字体系列名称必须作为带引号的字符串包含。否则，字体系列名称将被解释为等效的 CSS 关键字或通用系列名称。当用作关键字时，通用字体系列名称——serif、sans-serif、monospace、cursive 和 fantasy——以及全局 CSS 关键字不得加引号，因为字符串不会被解释为 CSS 关键字。

字体系列示例

让我们在之前的示例中添加内容，为段落设置无衬线字体

css

p {
  color: red;
  font-family: "Helvetica", "Arial", sans-serif;
}

这给了我们以下结果：

px（像素）：文本所需的高度像素数。这是一个绝对单位——它在几乎任何情况下都会在页面上产生相同的字体最终计算值。
em：1 em 等于我们当前样式化元素的父元素上设置的字体大小（更具体地说，是父元素中包含的大写字母 M 的宽度）。如果你有很多嵌套元素设置了不同的字体大小，这可能会变得难以计算，但它是可以做到的，如下所示。为什么还要费劲呢？一旦你习惯了，它就非常自然，你可以使用 em 来设置所有东西的大小，而不仅仅是文本。你可以使用 em 来设置整个网站的大小，这使得维护变得容易。
rem：这些与 em 的工作方式相同，只是 1 rem 等于文档根元素（即 <html>）上设置的字体大小，而不是父元素。这使得计算字体大小的数学变得容易得多。

元素的 font-size 继承自该元素的父元素。这一切都始于整个文档的根元素——<html>——其标准 font-size 在浏览器中设置为 16px。根元素内的任何段落（或其他没有浏览器设置不同大小的元素）的最终大小都将为 16px。其他元素可能具有不同的默认大小。例如，h1 元素的默认大小为 2em，因此其最终大小将为 32px。

当你开始更改嵌套元素的字体大小时，事情会变得更加棘手。例如，如果你的页面中有一个 <article> 元素，并将其 font-size 设置为 1.5 em（这将计算出最终大小为 24 px），然后希望 <article> 元素内的段落的计算字体大小为 20 px，你会使用什么 em 值？

html

<!-- document base font-size is 16px -->
<article>
  <!-- If my font-size is 1.5em -->
  <p>My paragraph</p>
  <!-- How do I compute to 20px font-size? -->
</article>

你需要将其 em 值设置为 20/24，即 0.83333333 em。数学可能很复杂，因此你需要小心如何设置样式。最好尽可能使用 rem 以保持简单，并尽可能避免设置容器元素的 font-size。

字体样式、字体粗细、文本转换和文本装饰

CSS 提供了四个常用属性来改变文本的视觉粗细/强调

font-style：用于打开或关闭斜体文本。可能的值如下（你很少会使用这个，除非你因为某种原因想要关闭一些斜体样式）
- normal：将文本设置为正常字体（关闭现有斜体）。
- italic：将文本设置为使用字体的斜体版本，如果可用；如果不可用，它将用倾斜代替模拟斜体。
- oblique：将文本设置为使用斜体字体的模拟版本，通过倾斜正常版本创建。
font-weight：设置文本的粗细。如果有很多字体变体可用（例如 -light、-normal、-bold、-extrabold、-black 等），则有许多值可用，但实际上你很少会使用除 normal 和 bold 以外的任何值
- normal, bold：正常和粗体字体粗细。
- lighter, bolder：将当前元素的粗细设置为比其父元素的粗细轻一步或重一步。
- 100 – 900：数字粗细值，如果需要，提供比上述关键字更细粒度的控制。
text-transform：允许你设置字体进行转换。值包括
- none：阻止任何转换。
- uppercase：将所有文本转换为大写。
- lowercase：将所有文本转换为小写。
- capitalize：将所有单词的首字母大写。
- full-width：将所有字形转换为以固定宽度正方形书写，类似于等宽字体，允许对齐例如拉丁字符和亚洲语言字形（如中文、日文、韩文）。
text-decoration：设置/取消设置字体的文本装饰（你主要会用它来取消链接的默认下划线）。可用值有
- none：取消任何已有的文本装饰。
- underline：文本下划线。
- overline：文本上划线。
- line-through：文本删除线。
你应该注意，text-decoration 可以同时接受多个值，如果你想同时添加多个装饰，例如，text-decoration: underline overline。还要注意，text-decoration 是 text-decoration-line、text-decoration-style 和 text-decoration-color 的简写属性。你可以使用这些属性值的组合来创建有趣的效果，例如：text-decoration: line-through red wavy。

让我们在示例中添加其中几个属性

css

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
  text-transform: capitalize;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.5rem;
  color: red;
  font-family: "Helvetica", "Arial", sans-serif;
}

我们的新结果如下

文本阴影

你可以使用 text-shadow 属性为文本应用阴影。它最多接受四个值，如下例所示

css

text-shadow: 4px 4px 5px red;

这四个属性如下

阴影相对于原始文本的水平偏移量——这可以采用大多数可用的 CSS 长度和大小单位，但你最常使用 px；正值将阴影向右移动，负值向左移动。此值必须包含。
阴影相对于原始文本的垂直偏移量。这与水平偏移量类似，只是它将阴影向上/向下移动，而不是向左/向右移动。此值必须包含。
模糊半径：值越高意味着阴影分散得越广。如果未包含此值，则默认为 0，表示没有模糊。这可以采用大多数可用的 CSS 长度和大小单位。
阴影的基本颜色，可以采用任何 CSS 颜色单位。如果未包含，则默认为 currentColor，即阴影的颜色取自元素的 color 属性。

多个阴影

你可以通过包含多个用逗号分隔的阴影值，为同一文本应用多个阴影，例如

css

h1 {
  text-shadow:
    1px 1px 1px red,
    2px 2px 1px red;
}

如果我们将此应用于 Tommy The Cat 示例中的 <h1> 元素，我们将得到以下结果

注意： 你可以在 Sitepoint 文章使用 CSS text-shadow 兼职中查看更多有趣的 text-shadow 用法示例。

文本布局

基本字体属性介绍完毕，现在让我们看看可以用来影响文本布局的属性。

文本对齐

text-align 属性用于控制文本在其包含内容框中的对齐方式。可用值如下所示。它们的工作方式与常规文字处理应用程序中的方式大致相同

left：文本左对齐。
right：文本右对齐。
center：文本居中。
justify：使文本分散开，改变单词之间的间距，使所有文本行的宽度相同。你需要小心使用——它看起来可能很糟糕，尤其是当应用于包含许多长单词的段落时。如果你打算使用它，你还应该考虑同时使用其他东西，例如 hyphens，以便将一些较长的单词跨行断开。

如果我们将 text-align: center; 应用于示例中的 <h1>，我们将得到以下结果

h1 {
  text-align: center;
}

行高

line-height 属性设置每行文本的高度。此属性不仅可以接受大多数长度和大小单位，还可以接受无单位值，该值充当乘数，通常被认为是最佳选择。使用无单位值时，font-size 会被乘以并产生 line-height。正文文本在行间距适当的情况下通常看起来更美观，也更容易阅读。推荐的行高约为 1.5 – 2（双倍行距）。要将我们的文本行设置为字体高度的 1.6 倍，我们将使用

css

p {
  line-height: 1.6;
}

将其应用于示例中的 <p> 元素将给出此结果

字母和单词间距

letter-spacing 和 word-spacing 属性允许你设置文本中字母和单词之间的间距。你不会经常使用这些，但可能会发现它们对于获得特定外观或提高特别密集的字体的可读性很有用。它们可以接受大多数长度单位。

为了说明，我们可以对 HTML 示例中每个 <p> 元素的第一行应用一些单词和字母间距，使用

css

p::first-line {
  letter-spacing: 4px;
  word-spacing: 4px;
}

这会使我们的 HTML 呈现为

其他值得一看的属性

以上属性为你提供了如何在网页上开始样式化文本的想法，但还有更多属性你可以使用。我们只想在这里涵盖最重要的属性。一旦你习惯了使用上述属性，你还应该探索以下属性

字体样式

font-variant：在小型大写字母和正常字体替代之间切换。
font-kerning：打开和关闭字体字偶间距选项。
font-feature-settings：打开和关闭各种 OpenType 字体功能。
font-variant-alternates：控制给定字体的替代字形的使用。
font-variant-caps：控制替代大写字形的使用。
font-variant-east-asian：控制东亚文字（如日语和中文）替代字形的使用。
font-variant-ligatures：控制文本中使用的连字和上下文形式。
font-variant-numeric：控制数字、分数和序数标记的替代字形的使用。
font-variant-position：控制以小尺寸作为上标或下标定位的替代字形的使用。
font-size-adjust：独立于实际字体大小调整字体的视觉大小。
font-stretch：在给定字体的可能替代拉伸版本之间切换。
text-underline-position：指定使用 text-decoration-line 属性 underline 值设置的下划线的位置。
text-rendering：尝试执行一些文本渲染优化。

文本布局样式

text-indent：指定文本内容第一行开头之前应留出的水平空间量。
text-overflow：定义如何向用户提示未显示的溢出内容。
white-space：定义如何处理元素内部的空白和相关的换行符。
word-break：指定是否在单词内断行。
direction：定义文本方向。（这取决于语言，通常最好让 HTML 处理这部分，因为它与文本内容相关。）
hyphens：打开和关闭支持语言的连字符。
line-break：放宽或加强亚洲语言的断行。
text-align-last：定义块的最后一行或强制换行前的一行的对齐方式。
text-orientation：定义行中文本的方向。
overflow-wrap：指定浏览器是否可以在单词内部断行以防止溢出。
writing-mode：定义文本行是水平还是垂直布局，以及后续行的流动方向。

字体速记

许多字体属性也可以通过简写属性 font 进行设置。它们的书写顺序如下：font-style、font-variant、font-weight、font-stretch、font-size、line-height 和 font-family。

在所有这些属性中，只有 font-size 和 font-family 是使用 font 简写属性时必需的。

在 font-size 和 line-height 属性之间必须放置一个斜杠。

一个完整的示例如下所示

css

font:
  italic normal bold normal 3em/1.5 "Helvetica",
  "Arial",
  sans-serif;

文本样式练习

好的，轮到你了。对于这个任务，我们没有为你准备任何具体的练习。我们只是希望你好好玩玩一些字体/文本布局属性。看看你自己能想出什么！

单击下面代码块中的**“播放”**以在 MDN Playground 中编辑示例。
在提供的空 p { } 规则中添加一些声明，以改变所提供文本的样式。尽情发挥创意。

如果你犯了错误，可以使用 MDN Playground 中的“重置”按钮清除你的工作。请参阅文章中前面的部分，以查找有关你可以设置的字体和文本样式的更多信息。

html

<p>Some sample text for your delight</p>

css

p {

}

总结

我们希望你喜欢本文中的文本操作！下一篇文章将为你提供有关 HTML 列表样式化的所有必要知识。

另见

关于 CSS font-family 属性的一切，explainers.dev
网页安全字体, Scrimba ^{MDN 学习伙伴}

帮助改进 MDN

了解如何贡献

此页面由 MDN 贡献者最后修改于 2025 年 10 月 13 日。

在 GitHub 上查看此页面 • 报告此内容问题