排版

通过集合保持井然有序 根据您的偏好保存内容并对其进行分类。

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

如果您没有指定行长，浏览器会在屏幕边缘换行。因此，Web 上的文本默认是自适应的，它可以流动以适应用户的视口。

但这并不意味着文本适合屏幕就意味着阅读起来很舒适。良好的排版完全是以适当的方式呈现文本。排版不仅仅是选择合适的字体来使用。您需要考虑用户的偏好设置、文本大小、行长以及文本行之间的距离。

文本大小

很难知道 Web 上的文本应该有多大。

如果有人使用的是小屏幕，那么他们的屏幕很可能离眼睛很近 - 大约一个手臂的距离，这样猜测可能比较稳妥。

但随着屏幕变得越来越大，这种联系就更难建立了。笔记本电脑大小的屏幕可能离观看者相当近，但宽屏台式显示器的大小与电视屏幕差不多。人们与台式屏幕的距离大约是一个手臂的长度，但他们与电视的距离要远得多。

尽管如此，虽然您无法确定某人离屏幕有多远，但您可以尝试使用文本大小，希望这些大小最终是合适的。对于较小的屏幕使用较小的文本大小，对于较大的屏幕使用较大的文本大小。

您可以使用媒介查询在屏幕尺寸变宽时更改 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 上。

罗伯特·布林赫斯特在他的经典著作排版样式要素中对行长（或度量）有如下看法：

对于以衬线字体和文本大小设置的单列页面，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 字体

字体就像您文字的声音。在 Web 上，很长一段时间以来，字体选项非常少。系统字体是唯一的选择。但现在您可以选择与您的内容感觉相匹配的 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 字体文件都可能会降低用户体验，因为它会增加页面加载时间。请记住，设计不仅仅关乎最终像素的外观。这些像素的绘制速度是用户体验的关键部分。感觉快速的体验就是良好的用户体验。

字体加载

您可以请求浏览器尽快开始下载字体文件。将 link 元素添加到文档的 head 中，该元素引用您的 Web 字体文件。一个 rel 属性，其值为 preload，告诉浏览器优先处理该文件。一个 as 属性，其值为 font，告诉浏览器这是什么类型的文件。type 属性允许您更加具体。

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

即使您自己托管字体文件，也需要包含 crossorigin 属性。

使用 CSS font-display 属性告知浏览器如何管理从系统字体到 Web 字体的切换。您可以选择在 Web 字体加载完成之前不显示任何文本。您可以选择立即显示系统字体，然后在 Web 字体加载完成后切换到 Web 字体。这两种策略都有其缺点。如果您等到 Web 字体下载完成后再显示任何文本，用户可能会发现自己长时间盯着空白页，感到非常沮丧。如果您先以系统字体显示文本，然后切换到 Web 字体，用户可能会体验到页面上内容发生令人不快的偏移。

一个好的折衷方案是等待一小段时间再显示任何文本。如果 Web 字体在该时间结束之前加载完成，则会使用 Web 字体显示文本，而不会发生内容偏移。如果 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;
}

可变字体

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

可变字体通过使用一个文件解决了这个问题。可变字体文件是自适应的，而不是为常规、粗体、特粗体等使用单独的文件。它包含在各种粗细或样式范围内显示所需的所有信息。

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

Web 上的良好排版不仅仅关乎您作为设计师所做的字体选择。自适应排版还关乎尊重用户的设备和网络连接。最终结果是无论以何种方式查看，设计都感觉恰到好处。

既然您已经掌握了自适应文本，那么现在是深入了解自适应图片的时候了。

检查您的理解情况

测试您关于排版的知识