感谢您关注 Google I/O 大会！观看点播内容。

此页面由 Cloud Translation API 翻译。

文本和排版

CSS 播客 - 第 36 集：文本和排版

文本是 Web 的核心构建块之一。

制作网站时，您不一定需要设置文本样式；HTML 实际上有一些非常合理的默认样式。

不过，文本很可能构成您网站的大部分内容，因此不妨添加一些样式来美化文本。只需更改几个基本属性，即可显著改善用户的阅读体验！

在本单元中，我们将从 @font-face 规则开始，该规则可让您将自定义字体导入网页。这样可以确保您获得所需的确切排版，而不会受用户安装的字体影响。

接下来，我们将介绍一些重要的 CSS 字体属性，包括 font-family、font-style、font-weight 和 font-size。这些基础知识为调整文本样式和可读性奠定了基础。

在最后介绍一些高级主题（例如，可变字体和伪元素），这些高级主题可以进一步优化排版控制。此外，我们还会介绍段落专用属性（例如 text-indent 和 word-spacing）。

本课程将提供实用示例和提示，帮助您巩固对这些 CSS 技术的理解并学会加以应用。

`@font-face` 规则

@font-face CSS at-rule 在 Web 设计中非常有用，可让您指定和使用自定义字体来显示文本。@font-face 的优点在于其多样性：您可以从远程服务器或用户设备上安装的字体中获取字体。

语法

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff")
}

描述用语

ascent-override: 自定义 ascent 指标，影响基准线上方的空间。
descent-override: 调整下降度量值，影响基准线下方的空间。
font-display: 根据下载状态控制字体的显示行为。
font-family: 为字体相关属性内使用的字体命名。
font-stretch: 设置可接受的水平缩放，以单个值或范围的形式指定。
font-style: 定义字体样式，支持斜体样式的角度范围。
font-weight: 确定字体的粗细或可用粗细范围。
font-feature-settings: 启用对 OpenType 字体功能的访问权限。
font-variation-settings: 提供对可变字体设置的精细控制。
line-gap-override: 替换字体的默认行间距。
size-adjust: 将缩放比例应用于字体的轮廓和基准。
src: 定义字体来源（本地或远程）。@font-face 规则需要此设置。结合使用 src 中的 url() 和 local() 是一种常用策略，即使用本地字体（如果有），还原为远程字体文件作为后备。浏览器会根据声明顺序确定资源的优先级，因此 local() 通常应位于 url() 之前。
unicode-range: 限制此字体应该使用的字符。

说明

@font-face 让设计师可以使用自定义排版，从而摆脱“适合 Web 的”字体的限制。local() 函数在用户设备上搜索字体的功能可以提供不依赖于互联网连接的无缝体验。

字体 MIME 类型

格式	MIME 类型
TrueType	`font/ttf`
OpenType	`font/otf`
Web Open Font Format	`font/woff`
Web Open Font Format 2	`font/woff2`

@font-face 和 font-family 之间的区别

在 CSS 中，@font-face 和 font-family 经常被混淆，但它们的用途各不相同。

正如我们所讨论的，@font-face 是一种规则，用于定义您要在 Web 应用中使用的任何自定义字体。它会告知浏览器下载字体的来源、在加载期间如何显示字体（使用 font-display 属性），并指定要下载的字符子集（使用 unicode-range）。

与之相反，font-family 是 CSS 规则中使用的 CSS 属性，用于向元素分配特定字体或字体列表。font-family 下列出的字体可以是 Web 安全字体、系统字体或使用 @font-face 定义的自定义字体。

总而言之，@font-face 声明字体并为其指定名称，font-family 则将此声明的字体应用于 HTML 元素。

下面是同时使用这两者的示例：

<table>
  <thead>
    <tr>
      <th><p><pre>
@font-face {
  font-family: "CustomFont";
  src: url("customfont.woff2") format("woff2");
}

body {
  font-family: "CustomFont", Arial, sans-serif;
}

在此示例中，@font-face 定义了“CustomFont”，并告知浏览器在哪里可以找到它。然后，font-family 属性会将其应用于 body 元素，如果“CustomFont”不可用，则使用 Arial 作为后备字体。

更改字体

浏览器支持

来源

使用 font-family 更改文本的字体。

font-family 属性接受以英文逗号分隔的字符串列表，它们分别引用“特定”或“通用”字体系列。特定字体系列是带引号的字符串，例如“Helvetica”“EB Garamond”或“Times New Roman”。通用字体系列是 serif、sans-serif 和 monospace 等关键字（请参阅 MDN 上的完整选项列表）。浏览器将显示所提供列表中第一个可用的字体。

注意：当浏览器从 font-family 声明中选择要显示的字体时，不会仅停留在列表中第一个可用字体。而是一次选择一个字符的字体。如果列表中的第一种字体不包含特定字符，系统会继续使用下一种字体，以此类推。

使用 font-family 时，您应至少指定一个通用字体系列，以防用户的浏览器没有您偏好的字体。一般来说，回退通用字体系列应与首选字体相似：如果使用 font-family: "Helvetica"（一种无衬线字体系列），则回退字体应为 sans-serif 以匹配。

使用斜体和斜体字体

浏览器支持

来源

使用 font-style 设置文本是否应采用斜体。font-style 接受以下关键字之一：normal、italic 和 oblique。

注意：问题：italic 和 oblique 有何区别？答：在支持 font-style: italic 的字体中，font-style: italic 通常是正体字体的草书版本。font-style: oblique 会显示倾斜版本的常规字体。

将文本设为粗体

浏览器支持

来源

使用 font-weight 设置文本的“粗体”属性。此属性接受关键字值 (normal、bold)、相对关键字值 (lighter、bolder) 和数值 (100 到 900)。

关键字 normal 和 bold 分别相当于数值 400 和 700。

关键字 lighter 和 bolder 是相对于父元素计算的。如需查看显示此值确定方式的实用图表，请参阅 MDN 的相对权重的含义。

注意：大多数字体（尤其是“适用于 Web 的”字体）仅支持粗细 400 (normal) 和 700 (bold)。使用 @font-face 或 @import 导入字体时，您可以选择要提取的特定粗细。不过，非可变字体仅支持以 100 为单位的 font-weight 数值，例如 100、200、300 等。如果您想使用 font-weight: 321（举例来说），则必须使用可变字体。

更改文字大小

浏览器支持

来源

使用 font-size 控制文本元素的大小。此属性接受长度值、百分比值和一些关键字值。

除了长度和百分比值之外，font-size 还接受一些绝对关键字值（xx-small、x-small、small、medium、large、x-large、xx-large）和几个相对关键字值（smaller、larger）。相对值相对于父元素的 font-size。

注意：问题：em 和 rem 有何区别？答：在 CSS 中，em 表示从元素父级继承的 font-size。例如，font-size: 2em 等同于父项的 font-size 乘以 2。rem 与之类似，但表示从根元素（例如 <html>）继承的 font-size。

更改行间距

浏览器支持

来源

使用 line-height 指定元素中每行的高度。此属性接受数字、长度、百分比或关键字 normal。通常，建议使用数字（而非长度或百分比），以避免继承问题。

更改字符之间的空格

浏览器支持

来源

使用 letter-spacing 控制文本中字符之间的水平间距。此属性接受长度值，例如 em、px 和 rem。

请注意，指定的值会增加字符之间的自然间距。在以下演示中，请尝试选择单个字母，查看其信箱大小以及随着 letter-spacing 的变化情况。

更改字词之间的空格

浏览器支持

来源

使用 word-spacing 可增大或缩小文本中每个字词之间的空格长度。此属性接受长度值，例如 em、px 和 rem。请注意，您指定的长度是指除了正常间距之外的额外空间。这意味着，word-spacing: 0 相当于 word-spacing: normal。

`font` 简写

您可以使用简写形式 font 属性一次设置多个与字体相关的属性。可能的属性包括 font-family、font-size、font-stretch、font-style、font-variant、font-weight 和 line-height。

如需详细了解如何对这些属性进行排序，请参阅 MDN 的 font 文章。

更改文本的大小写

浏览器支持

来源

使用 text-transform 修改文本的大小写，而无需更改底层 HTML。此属性接受以下关键字值：uppercase、lowercase 和 capitalize。

为文本添加下划线、上划线和插入行

浏览器支持

来源

使用 text-decoration 向文本中添加行。下划线是最常用的，但您也可以在文本上方或文本中直接添加行！

text-decoration 属性是下面详述的更具体属性的简写形式。

text-decoration-line 属性接受关键字 underline、overline 和 line-through。您还可以为多行指定多个关键字。

text-decoration-color 属性用于设置 text-decoration-line 中的所有装饰的颜色。

text-decoration-style 属性接受关键字 solid、double、dotted、dashed 和 wavy。

text-decoration-thickness 属性接受任何长度值，并从 text-decoration-line 设置所有装饰的描边宽度。

text-decoration 属性是上述所有属性的简写形式。

注意：使用 text-underline-position 可将 text-decoration: underline 的下划线偏移指定的量。此属性不适用于 overline 或 line-through。

添加文本缩进

浏览器支持

来源

使用 text-indent 为文本块添加缩进。此属性采用长度（例如 10px、2em）或所包含块宽度的百分比。

处理溢出或隐藏的内容

浏览器支持

来源

使用 text-overflow 指定隐藏内容的表示方式。有两个选项：clip（默认），用于在溢出点截断文本；ellipsis，用于在溢出点显示省略号 (…)。

控制空格

浏览器支持

来源

white-space 属性用于指定应如何处理元素中的空白。如需了解详情，请参阅 MDN 上的 white-space 文章。

white-space: pre 非常适合渲染 ASCII 艺术或精心缩进的代码块。

控制换行方式

浏览器支持

来源

使用 word-break 可更改当字词超出行时应如何“换行”。默认情况下，浏览器不会拆分字词。为 word-break 使用关键字值 break-all 会指示浏览器在必要时在单个字符处拆分单词。

更改文本对齐方式

浏览器支持

来源

使用 text-align 指定块或表格单元格元素中的文本的水平对齐方式。此属性接受关键字值 left、right、start、end、center、justify 和 match-parent。

值 left 和 right 分别将文本对齐到内容块的左侧和右侧。

使用 start 和 end 表示当前书写模式下文本行的开始和结束位置。因此，start 在英语中映射到 left，在阿拉伯语（从右到左 [RTL] 书写）中映射到 right。它们是逻辑对齐方式，如需了解详情，请参阅我们的逻辑属性模块。

使用 center 将文本与文本块的中心对齐。

justify 的值会自动整理文本并更改单词间距，以便文本与块的左侧和右侧对齐。

更改文本方向

浏览器支持

来源

使用 direction 设置文本方向，可以是 ltr（从左到右，默认值）或 rtl（从右到左）。某些语言（例如阿拉伯语、希伯来语或波斯语）是从右到左书写的，因此应使用 direction: rtl。对于英语和所有其他从左到右的语言，请使用 direction: ltr。

注意：通常，您应优先使用 HTML 属性 dir，而不是 direction。如需了解详情，请查看此 Stack Overflow 讨论。

更改文本流程

浏览器支持

来源

使用 writing-mode 更改文本的流动和排列方式。默认值为 horizontal-tb，但您也可以为想要水平显示的文本将 writing-mode 设置为 vertical-lr 或 vertical-rl。

更改文本的方向

浏览器支持

来源

使用 text-orientation 指定文本中字符的方向。此属性的有效值为 mixed 和 upright。仅当 writing-mode 设置为 horizontal-tb 以外的其他值时，此属性才相关。

为文本添加阴影

浏览器支持

来源

使用 text-shadow 为文本添加阴影。此属性需要三个长度（x-offset、y-offset 和 blur-radius）和一个颜色。

如需了解详情，请参阅有关阴影的模块的 text-shadow 部分。

可变字体

通常，“普通”字体需要为不同版本的字体（例如粗体、斜体或紧缩）导入不同的文件。可变字体是一种可以在一个文件中包含某种字体的许多不同变体的字体。

Roboto Flex（宽度和粗细的随机组合）

如需了解详情，请参阅我们关于可变字体的文章。

伪元素

`::first-letter` 和 `::first-line` 伪元素

浏览器支持

来源

::first-letter 和 ::first-line 伪元素分别定位到文本元素的第一个字母和第一行。

`::selection` 伪元素

浏览器支持

来源

使用 ::selection 伪元素来更改用户所选文本的外观。

使用此伪元素时，只能使用以下 CSS 属性：color、background-color、text-decoration、text-shadow、stroke-color、fill-color、stroke-width。

font-variant

浏览器支持

来源

font-variant 属性是许多 CSS 属性的简写形式，可让您选择 small-caps 和 slashed-zero 等字体变体。此简写形式包含的 CSS 属性包括 font-variant-alternates、font-variant-caps、font-variant-east-asian、font-variant-ligatures 和 font-variant-numeric。请查看各项媒体资源对应的链接，详细了解其使用方式。

检查您的理解情况

测试您对 Web 排版知识的掌握情况

以下哪个关键字可用作 font-family 通用后备关键字？

serif

正确！

monospace

正确！

italic

请重试。italic 是 font-style 的有效关键字，而非 font-family。

sci-fi

请重试。不过，fantasy 是 font-family 的有效通用后备选项。

sans-serif

正确！

helvetica

请重试。"Helvetica" 不是通用关键字，而是指特定的字体系列。

哪个语句用于将每个字词的首字母转换为大写？例如，This is a sentence. ➡ This Is A Sentence.

text-capitalize: true;

请重试。

text-case: capitalize;

请重试。

text-transform: capitalize;

正确！

font-style: capitals;

请重试。

font-variant: capitalize;

请重试。

判断正误：使用 text-orientation 可将文本左对齐、右对齐或居中对齐。

正确

请重试。text-orientation 用于更改一行字母的旋转角度。

错误

正确！text-orientation 用于更改一行字母的旋转角度。使用 text-align 可将文本左对齐、右对齐或居中对齐（以及更多对齐方式！）。

哪个 CSS 属性可用于更改文本各行之间的间距？

line-spacing

请重试。

leading

请重试。Leading 是排版中行与行之间的空格的正确术语，但它不是有效的 CSS 属性。

baseline-distance

请重试。

line-height

正确！

资源

字体最佳实践介绍了导入字体、渲染字体以及在 Web 上使用字体的其他最佳实践。
MDN 基本文本和字体样式。

文本和排版

CSS 播客 - 第 36 集：文本和排版

@font-face 规则

语法

描述用语

说明

字体 MIME 类型

@font-face 和 font-family 之间的区别

更改字体

使用斜体和斜体字体

将文本设为粗体

更改文字大小

更改行间距

更改字符之间的空格

更改字词之间的空格

font 简写

更改文本的大小写

为文本添加下划线、上划线和插入行

添加文本缩进

处理溢出或隐藏的内容

控制空格

控制换行方式

更改文本对齐方式

更改文本方向

更改文本流程

更改文本的方向

为文本添加阴影

可变字体

伪元素

::first-letter 和 ::first-line 伪元素

::selection 伪元素

font-variant

检查您的理解情况

资源

`@font-face` 规则

`font` 简写

`::first-letter` 和 `::first-line` 伪元素

`::selection` 伪元素