基础文本和字体样式

在本文中，我们将开始您的旅程，帮助您掌握使用 CSS 样式文本。在这里，我们将详细介绍文本/字体样式的所有基本原理，包括设置字体粗细、字体系列和样式、字体速记、文本对齐和其他效果，以及行高和字间距。

先决条件	HTML 基础知识（学习 HTML 简介），CSS 基础知识（学习 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>

您可以在 GitHub 上找到完成的示例（另请参阅源代码）。

颜色

color 属性设置所选元素的前景内容的颜色，通常是文本，但也可能包括其他一些内容，例如使用 text-decoration 属性放置在文本上的下划线或上划线。

color 可以接受任何 CSS 颜色单位，例如

css

p {
  color: red;
}

这将导致段落变成红色，而不是标准浏览器默认的黑色，如下所示

<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 字体，该字体存在于任何计算机上。

Web 安全字体

说到字体可用性，只有特定数量的字体通常在所有系统上都可用，因此可以在没有太多顾虑的情况下使用。这些就是所谓的Web 安全字体。

大多数情况下，作为 Web 开发人员，我们希望对用于显示文本内容的字体有更具体的控制权。问题是如何找到一种方法来了解哪种字体在用于查看我们网页的计算机上可用。在每种情况下都没有办法知道这一点，但已知 Web 安全字体在大多数最常用的操作系统（Windows、macOS、最常见的 Linux 发行版、Android 和 iOS）的几乎所有实例中都可用。

随着操作系统的不断发展，实际 Web 安全字体的列表也会发生变化，但至少目前可以将以下字体视为 Web 安全字体（其中许多字体因 90 年代末和 21 世纪初微软的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 操作系统上可用的 Web 安全字体的列表，这可以帮助您确定您认为适合使用的字体。

注意：有一种方法可以将自定义字体与网页一起下载，以便您可以根据需要自定义字体使用方式：Web 字体。这稍微复杂一些，我们将在模块后面的单独的文章中讨论。

默认字体

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; }`

字体栈

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

css

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

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

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

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

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

字体系列示例

让我们在之前的示例中添加内容，为段落提供一个无衬线字体

css

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

这将得到以下结果

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

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。

让我们看看如何向我们的示例中添加几个这些属性

我们的新结果如下所示

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

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元素，我们将得到以下结果

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

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

注意：您可以在Sitepoint文章Moonlighting with CSS text-shadow中看到更多有趣的text-shadow用法示例。

文本布局

在基本字体属性的基础上，让我们看看可以用来影响文本布局的属性。

文本对齐

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

left：左对齐文本。
right：右对齐文本。
center：居中对齐文本。
justify：使文本分散开来，改变单词之间的间隙，以便所有文本行都具有相同的宽度。您需要谨慎使用此属性——它可能看起来很糟糕，尤其是在应用于包含许多长单词的段落时。如果您要使用此属性，还应该考虑与其他属性一起使用，例如hyphens，以便将一些较长的单词换行。

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

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

css

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
  text-transform: capitalize;
  text-shadow:
    1px 1px 1px red,
    2px 2px 1px red;
  text-align: center;
}

h1 + p {
  font-weight: bold;
}

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

行高

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

css

p {
  line-height: 1.6;
}

将其应用于示例中的<p>元素将得到以下结果

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

css

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
  text-transform: capitalize;
  text-shadow:
    1px 1px 1px red,
    2px 2px 1px red;
  text-align: center;
}

h1 + p {
  font-weight: bold;
}

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

字母和单词间距

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

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

css

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

这将呈现我们的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>

css

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
  text-transform: capitalize;
  text-shadow:
    1px 1px 1px red,
    2px 2px 1px red;
  text-align: center;
  letter-spacing: 2px;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.5rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.6;
  letter-spacing: 1px;
}

其他值得关注的属性

以上属性让您了解如何在网页上开始设置文本样式，但还有许多其他属性可以使用。我们只想在这里介绍最重要的属性。一旦您习惯了使用上述属性，您还应该探索以下属性

字体样式

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;

主动学习：玩转文本样式化

在本活动学习课程中，我们没有为您准备任何具体的练习。我们只是希望您能很好地使用一些字体/文本布局属性。亲身体验一下您可以想出什么！您可以使用离线 HTML/CSS 文件执行此操作，也可以将您的代码输入到下面的实时可编辑示例中。

如果您犯了错误，您可以随时使用“重置”按钮重置它。

<div
  class="body-wrapper"
  style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML Input</h2>
  <textarea
    id="code"
    class="html-input"
    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
<p>Some sample text for your delight</p>
  </textarea>

  <h2>CSS Input</h2>
  <textarea
    id="code"
    class="css-input"
    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
p {

}
  </textarea>

  <h2>Output</h2>
  <div
    class="output"
    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div>
  <div class="controls">
    <input
      id="reset"
      type="button"
      value="Reset"
      style="margin: 10px 10px 0 0;" />
  </div>
</div>

const htmlInput = document.querySelector(".html-input");
const cssInput = document.querySelector(".css-input");
const reset = document.getElementById("reset");
let htmlCode = htmlInput.value;
let cssCode = cssInput.value;
const output = document.querySelector(".output");

const styleElem = document.createElement("style");
const headElem = document.querySelector("head");
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", () => {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

总结

希望您喜欢本文中关于文本的练习！下一篇文章将为您提供有关设置 HTML 列表样式的所有必要知识。