Chrome 将于 5 月 20-21 日重返 Google I/O！立即注册

文本和排版
使用集合保持井井有条根据您的偏好保存内容并进行分类。

CSS 播客 - 036：文本和排版

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

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

但是，文本很可能构成您网站的大部分内容，因此值得添加一些样式来美化它。通过更改一些基本属性，您可以显着改善用户的阅读体验！

在本模块中，我们将从 @font-face 规则开始，该规则允许您将自定义字体导入到您的网页中。这确保您可以获得所需的确切排版，而与用户安装的字体无关。

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

我们还将简要介绍段落特定的属性，如 text-indent 和 word-spacing，最后总结可变字体和伪元素等高级主题，这些主题进一步完善了您的排版控制。

整个过程将提供实际示例和技巧，以巩固您对这些 CSS 技术的理解和应用。

`@font-face` 规则

@font-face CSS at 规则在 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: 调整 descent 指标，影响基线下的空间。
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 开放字体格式	`font/woff`
Web 开放字体格式 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 字体系列），则您的回退应为 sans-serif 以匹配。

使用斜体和倾斜字体

浏览器支持

来源

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

注意： 问：italic 和 oblique 之间有什么区别？答：在支持它的字体中，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 导入字体时，您可以选择要拉入的特定粗细。但是，非可变字体仅支持 font-weight 的数值，例如 100 多，例如 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，在从右到左书写的阿拉伯语脚本中映射到 right。它们是逻辑对齐方式，请在我们的逻辑属性模块中了解更多信息。

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

justify 的值组织文本并自动更改单词间距，以便文本与块的左右边缘对齐。

更改文本方向

浏览器支持

来源

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

注意： 通常，您应该倾向于使用 HTML 属性 dir 而不是 direction。查看此 StackOverflow 讨论以了解更多详细信息。

更改文本流

浏览器支持

来源

使用 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 播客 - 036：文本和排版

@font-face 规则

语法

描述符

描述

字体 MIME 类型

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

更改字体

使用斜体和倾斜字体

使文本加粗

更改文本大小

更改行之间的空格

更改字符之间的空格

更改单词之间的空格

font 简写

更改文本的大小写

向文本添加下划线、上划线和贯穿线

向文本添加缩进

处理溢出或隐藏的内容

控制空白符

控制单词的换行方式

更改文本对齐方式

更改文本方向

更改文本流

更改文本方向

向文本添加阴影

可变字体

伪元素

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

::selection 伪元素

font-variant

检查您的理解情况

资源

文本和排版
使用集合保持井井有条根据您的偏好保存内容并进行分类。

`@font-face` 规则

`font` 简写

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

`::selection` 伪元素