排版

如果您未为文本指定任何样式，浏览器将应用自己的默认样式。这些样式表称为用户代理样式表，可能会因浏览器而异。用户还可以自行设置文本显示偏好设置。

如果您未指定行长度，浏览器会在屏幕边缘换行。因此，网页上的文字默认是自适应的，会根据用户的视口进行排版。

不过，即使文字可以显示在屏幕上，也不一定意味着阅读起来很舒适。良好的文字排版是指以适当的方式呈现文字。文字排版不仅仅是选择合适的字体。您需要考虑用户的偏好设置、文字大小、行长以及文字行之间的距离。

文字大小

很难知道网页上的文字应该多大。

如果有人使用的是小屏幕，那么可以肯定的是，他们的屏幕会离眼睛相当近，大约只有一只手的距离。

但随着屏幕越来越大，这种联系也越来越难建立。笔记本电脑大小的屏幕可能离观看者相当近，但宽屏桌面显示器的尺寸与电视屏幕差不多。人们坐在桌面屏幕前，距离屏幕大约一臂之遥，但坐在电视机前时，距离电视机要远得多。

不过，虽然您无法确定用户距离屏幕有多远，但可以尝试使用可能合适的字号。为较小的屏幕使用较小的字号，为较大的屏幕使用较大的字号。

您可以利用媒体查询，随着屏幕尺寸变大而更改 font-size 属性。

@media (min-width: 30em) {
  html {
    font-size: 125%;
  }
}

@media (min-width: 40em) {
  html {
    font-size: 150%;
  }
}

@media (min-width: 50em) {
  html {
    font-size: 175%;
  }
}

@media (min-width: 60em) {
  html {
    font-size: 200%;
  }
}

缩放文字

在特定断点处切换固定文本大小时，效果非常突兀。一种更具响应性的方法是让用户的设备宽度影响文字大小。

CSS 中的 vw 单位表示“视口宽度”。将字体大小与视口的宽度相关联意味着，文本将随着浏览器宽度的变化而相应地放大和缩小。这样一来，您就很难预测在任何特定宽度下文本的大小，但您知道文本大小将适合用户的浏览器宽度。

请务必不要在字号声明中单独使用 vw。

html {
  font-size: 2.5vw;
}

如果您这样做，用户将无法调整文字大小。如果您混入相对单位（例如 em、rem 或 ch），文本将可调整大小。CSS calc() 函数非常适合此用途。

html {
  font-size: calc(0.75rem + 1.5vw);
}

让浏览器来计算。这样一来，就很难准确预测在任何特定宽度下文本的大小，但您知道文本大小会在合适的范围内。用户的浏览器会负责计算确切的文字大小。

但现在，文字可能会在窄屏幕上变得过小，在宽屏幕上变得过大。

限制文字

您可能不希望文字极度缩小和放大。您可以使用 CSS clamp() 函数控制缩放的开始和结束位置。这样可将缩放比例“限制”在特定范围内。

clamp() 函数与 calc() 函数类似，但它接受三个值。中间值与您传递给 calc() 的值相同。初始值指定了最小尺寸，在本例中为 1rem，以确保不低于用户的首选字体大小。结束值指定最大尺寸。

html {
  font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}

现在，文字大小会根据用户屏幕的大小相应缩小或放大，但永远不会小于 1rem 或大于 2rem。

行长

Web 不同于印刷，但我们可以从印刷世界中汲取经验，并将其应用到 Web 上。

在经典著作《排版风格的要素》中，Robert Bringhurst 曾就行长（或度量）发表过以下看法：

对于采用衬线字体且字号适中的单列页面，45 到 75 个字符的行长被广泛认为是令人满意的。66 个字符的行（包括字母和空格）被广泛认为是理想的。对于多列作品，平均字符数最好为 40 到 50 个。

您无法直接在 CSS 中设置行长。没有 line-length 属性。不过，您可以限制容器的宽度，以防止文字过宽。max-inline-size 属性非常适合此用途。

请勿使用 px 等固定单位设置行长。用户可以增大或缩小字号，而行长应相应地进行调整。使用 rem 或 ch 等相对单位。

article {
  max-inline-size: 700px;
}

article {
  max-inline-size: 66ch;
}

如果宽度使用 ch 单位，则新行将在该字号的第 66 个字符处换行。

行高

虽然 CSS 中没有 line-length 属性，但有 line-height 属性。

较短的文本行可以具有较大的 line-height 值。但如果您为长文本行使用较大的 line-height 值，读者的眼睛很难从一行的末尾移动到下一行的开头。

article {
  max-inline-size: 66ch;
  line-height: 1.65;
}
blockquote {
  max-inline-size: 45ch;
  line-height: 2;
}

请为 line-height 声明使用无单位的值。这可确保行高相对于 font-size。

line-height: 24px;

line-height: 1.5;

组合和规模

请务必在构建用户界面时优先考虑层次结构，以提高清晰度和页面流程。一种很好的方法是使用内置于设计系统中的排版比例。

网络字体

字体的作用就像是文字的语音。在很长一段时间内，网页上的字体选项非常少。系统字体是唯一选项。不过，现在您可以选择与内容风格相符的 Web 字体。

使用 @font-face 告知浏览器在哪里可以找到您的 Web 字体文件。使用 woff2 作为您的 Web 字体格式。它具有良好的支持，并且性能提升效果最佳。

@font-face {
  font-family: Roboto;
  src: url('/fonts/roboto-regular.woff2') format('woff2');
}
body {
  font-family: Roboto, sans-serif;
}

不过，您添加的每个 Web 字体文件都可能会降低用户体验，因为这会增加网页加载时间。请注意，设计不仅仅是最终像素的呈现效果。这些像素的绘制速度是用户体验的关键部分。快速流畅的体验就是良好的用户体验。

字体加载

您可以请求浏览器尽快开始下载字体文件。在文档的 head 中添加一个引用 Web 字体文件的 link 元素。值为 preload 的 rel 属性会告知浏览器优先处理相应文件。值为 font 的 as 属性会告知浏览器这是什么类型的文件。借助 type 属性，您可以进一步指定文件类型。

<link href="/fonts/roboto-regular.woff2" type="font/woff2"
  rel="preload" as="font" crossorigin>

即使您自行托管字体文件，也需要添加 crossorigin 属性。

使用 CSS font-display 属性告知浏览器如何管理从系统字体到网络字体的切换。您可以选择在加载 Web 字体之前不显示任何文本。您可以选择立即显示系统字体，然后在网页字体加载完毕后切换到该字体。这两种策略都有缺点。如果您等到下载完 Web 字体后再显示任何文本，用户可能会发现自己盯着空白页面看了很长时间，这会让他们感到沮丧。如果您先以系统字体显示文本，然后再切换到 Web 字体，用户可能会发现网页上的内容突然发生变化。

一个不错的折中方案是等待一小段时间，然后再显示任何文本。如果网页字体在该时间结束之前加载完毕，则会使用网页字体显示文本，而不会发生内容偏移。如果时间到了，网络字体仍未加载，则使用系统字体显示文本，以便用户至少可以阅读内容。

如果您仍希望在网页字体最终加载时替换系统字体，请使用 font-display 值 swap。

body {
  font-family: Roboto, sans-serif;
  font-display: swap;
}

如果您希望在文本渲染后继续使用系统字体，请使用 font-display 值 fallback。

body {
  font-family: Roboto, sans-serif;
  font-display: fallback;
}

可变字体

如果您使用同一字体的多种不同粗细或样式的字体，最终可能会使用许多单独的字体文件，即每种粗细或样式对应一个单独的字体文件。

可变字体通过使用一个文件来解决此问题。与为常规、粗体、特粗体和其他变体分别提供单独的文件不同，可变字体文件具有响应性。它包含在各种字重或样式下显示所需的所有信息。

这意味着，单个可变字体文件比单个常规字体文件大，但单个可变字体文件可能比多个常规字体文件小。如果您使用许多不同的字重，可变字体可以大幅提升性能。

网页上的出色排版不仅取决于设计师选择的字体。自适应排版还意味着尊重用户的设备和网络连接。最终呈现的设计无论以何种方式查看，都能带来舒适的体验。

现在，您已经掌握了自适应文字，接下来该深入了解自适应图片了。

检查掌握情况

测测您对排版的了解程度