文本和排版

CSS 播客 - 036：文本和排版

文字是网络的核心组成要素之一。

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

不过，文字可能会占据网站的大部分空间，因此有必要添加一些样式来美化网站。通过更改一些基本属性，您可以显著改善用户的阅读体验！

在本单元中，我们将首先介绍一些基本的 CSS 字体属性，例如 font-family、font-style、font-weight 和 font-size。然后，我们将深入介绍影响文本段落的属性，例如 text-indent 和 word-spacing。最后，介绍一些更高级的主题，例如可变字体和伪元素。

更改字体

浏览器支持

  • 1
  • 12
  • 1
  • 1

来源

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

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

使用 font-family 时，您应该指定至少一个通用字体系列，以防用户的浏览器没有您的首选字体。通常，后备通用字体系列应该与您的首选字体类似：如果使用的是 font-family: "Helvetica"（Sans Serif 字体系列），则回退应为 sans-serif 以保持一致。

使用斜体和倾斜字体

浏览器支持

  • 1
  • 12
  • 1
  • 1

来源

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

将文字设为粗体

浏览器支持

  • 2
  • 12
  • 1
  • 1

来源

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

关键字 normal 和 bold 分别等同于数值 400 和 700。

关键字 lighter 和 bolder 是相对于父元素进行计算的。有关此值是如何确定的，请参阅 MDN 的相对权重的含义。

更改文字大小

浏览器支持

  • 1
  • 12
  • 1
  • 1

来源

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

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

更改行与行之间的间距

浏览器支持

  • 1
  • 12
  • 1
  • 1

来源

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

更改字符之间的空格

浏览器支持

  • 1
  • 12
  • 1
  • 1

来源

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

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

更改字词之间的空格

浏览器支持

  • 1
  • 12
  • 1
  • 1

来源

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

更改文字大小写

浏览器支持

  • 1
  • 12
  • 1
  • 1

来源

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

为文本添加下划线、上划线和直线

浏览器支持

  • 1
  • 12
  • 1
  • 1

来源

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

为文本添加缩进

浏览器支持

  • 1
  • 12
  • 1
  • 1

来源

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

处理溢出或隐藏的内容

浏览器支持

  • 1
  • 12
  • 7
  • 1.3

来源

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

控制空格

浏览器支持

  • 1
  • 12
  • 1
  • 1

来源

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

white-space: pre 可用于呈现 ASCII 图形或仔细缩进的代码块。

控制字词拆分方式

浏览器支持

  • 1
  • 12
  • 15
  • 3

来源

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

更改文本对齐方式

浏览器支持

  • 1
  • 12
  • 1
  • 1

来源

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

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

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

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

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

更改文本方向

浏览器支持

  • 2
  • 12
  • 1
  • 1

来源

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

更改文字流

浏览器支持

  • 48
  • 12
  • 41
  • 10.1

来源

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

更改文本方向

浏览器支持

  • 48
  • 79
  • 41
  • 14

来源

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

为文本添加阴影

浏览器支持

  • 2
  • 12
  • 3.5
  • 1.1

来源

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

如需了解详情，请参阅“阴影”单元的“text-shadow”部分。

变量字体

一般来说，“标准”字体需要针对不同版本的字体（例如粗体、斜体或浓缩）导入不同的文件。可变字体是指可在一个文件中包含同一字型的多个不同变体的字体。

随机组合宽度和重量的 Roboto Flex

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

伪元素

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

浏览器支持

  • 1
  • 12
  • 1
  • 1

来源

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

::selection 伪元素

浏览器支持

  • 1
  • 12
  • 62
  • 1.1

来源

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

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

font-variant

浏览器支持

  • 1
  • 12
  • 1
  • 1

来源

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
请重试。对于 font-style 来说，italic 是有效关键字，而不是 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 可将文本左对齐、右对齐或居中对齐。

True
请重试。text-orientation 可更改字母在一行中的旋转方式。
False
正确！text-orientation 可更改字母在一行中的旋转方式。使用 text-align 可将文本设为左对齐、右对齐或居中对齐（以及更多对齐方式）。

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

line-spacing
请重试。
leading
请重试。前导是排版中行间距的正确术语，但它不是有效的 CSS 属性。
baseline-distance
请重试。
line-height
正确！

资源