文本和排版

CSS 播客 - 036：文本和排版

文字是网页的核心构建块之一。

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

不过，文字很可能占据您网站的大部分内容，因此值得添加一些样式来美化文字。只需更改一些基本属性，您就可以显著改善用户的阅读体验！

在本模块中，我们将从 @font-face 规则开始，该规则可让您将自定义字体导入网页。这样可确保您获得所需的精确排版，而无需考虑用户安装的字体。

接下来，我们将介绍基本的 CSS 字体属性，包括 font-family、font-style、font-weight 和 font-size。这些基础知识为我们提供了操作文本的平台，以便调整文本的样式和可读性。

我们还将介绍段落专用属性（例如 text-indent 和 word-spacing），最后介绍可变字体和伪元素等高级主题，这些主题可进一步提升您的排版控制能力。

本指南中将提供大量实用示例和提示，以帮助您巩固对这些 CSS 技巧的理解和应用。

@font-face 规则

@font-face CSS @ 规则在网页设计中发挥着重要作用，可让您指定和使用自定义字体来显示文本。@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
自定义升幅指标，影响基准上方的空间。
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 使设计师能够使用自定义排版，摆脱“网页安全”字体的限制。local() 函数能够在用户设备上搜索字体，从而提供流畅的体验，而这种体验不一定依赖于互联网连接。

字体 MIME 类型

格式 MIME 类型
TrueType font/ttf
OpenType font/otf
Web 开放字体格式 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 作为后备字体。

更改字体

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

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

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

使用斜体和倾斜字体

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

将文字设为粗体

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

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

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

更改文字大小

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

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

更改行间距

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

更改字符之间的间距

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

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

更改字词之间的空格

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

使用 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 文章。

## 更改文本的大小写

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

使用 [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) 修改文本的大小写，而无需更改底层 HTML。此属性接受以下关键字值：`uppercase`、`lowercase` 和 `capitalize`。

为文字添加下划线、上划线和删除线

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

使用 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 属性是所有上述属性的简写形式。

为文本添加缩进

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

处理溢出或隐藏的内容

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 7.
  • Safari: 1.3.

Source

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

控制空格

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

white-space: pre 对于呈现 ASCII 图或精心缩进的代码块非常有用。

控制字词的断行方式

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 3.

Source

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

更改文本对齐方式

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

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

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

使用 center 将文字对齐到代码块的中心。

justify 的值可整理文本并自动更改字间距，使文本与块的左边缘和右边缘对齐。

控制文字换行方式

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.4.

Source

使用 text-wrap 更改元素内文本的换行方式。

此属性接受的关键字包括 wrap、nowrap、balance 和 stable。默认值为 wrap，该值通过在正常空格和断字处换行来最大限度地减少溢出。

您可以使用 nowrap 关键字来实现完全相反的效果，防止文本跨行显示，从而避免溢出。

如果您要撰写标题或头条新闻，并希望每行上的文字量相同，请使用 balance 关键字。为了提高性能，浏览器只会将此值应用于包含六行或更少文本的元素。

stable 关键字的作用与 wrap 类似，但旨在与 contenteditable 文本搭配使用。设置 text-wrap: stable 后，在编辑内容的过程中，内容上方的行不会发生移动。

有时，没有明确断点的长字符串可能会导致容器溢出。如需控制此类文本的换行方式，请使用 overflow-wrap。

Browser Support

  • Chrome: 23.
  • Edge: 18.
  • Firefox: 49.
  • Safari: 7.

Source

您可以为此属性使用 normal、break-word 和 anywhere 关键字。默认设置为 normal，除非文本包含空格或自然中断点，否则不会换行。

anywhere 和 break-word 值会在字符串内的任意位置添加断点，以防止溢出。这些关键字的不同之处在于它们对内在或显式 min-content 大小的响应方式。anywhere 关键字可实现所有可能的软断行机会。break-word 值不会，并且会使文本与最长的字词一样长。

更改文字方向

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

更改文字方向

Browser Support

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41.
  • Safari: 10.1.

Source

使用 writing-mode 更改文本的排版方式。默认值为 horizontal-tb，但您也可以将 writing-mode 设置为 vertical-lr 或 vertical-rl，以使文字沿水平方向流动。

更改文字方向

Browser Support

  • Chrome: 48.
  • Edge: 79.
  • Firefox: 41.
  • Safari: 14.

Source

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

为文字添加阴影

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 1.1.

Source

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

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

可变字体

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

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

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

伪元素

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

::selection 伪元素

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 62.
  • Safari: 1.1.

Source

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

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

font-variant

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

font-variant 属性是多个 CSS 属性的简写形式，可用于选择字体变体，例如 small-caps 和 slashed-zero。此简写属性包含的 CSS 属性有 font-variant-alternates、font-variant-caps、font-variant-east-asian、font-variant-ligatures 和 font-variant-numeric。如需详细了解每项属性的用法，请点击相应链接。

检验您的掌握情况

测试您对网页排版相关知识的掌握情况

以下哪个关键字可用作 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
请重试。行距是排版中行间距的正确术语，但不是有效的 CSS 属性。
baseline-distance
请重试。
line-height
正确！

资源