活版印刷术

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

如果您未指定行长，浏览器会在屏幕边缘将文本行换行。因此，默认情况下，网页上的文本属于自适应文本，它会自然流动以适应用户视口。

但是，文字与屏幕的适宜性并不代表用户可以轻松阅读。好的排版的关键在于以适当的方式呈现您的文本。排版不只是选择适合使用的字体。您需要考虑用户的偏好、文字大小、行长以及文字行之间的距离。

文字大小

很难确定网站上的文字应该多大尺寸。

如果有人使用小屏幕，可以肯定的是，他们的屏幕会非常接近他们的眼睛，只有一只手的距离。

但随着屏幕越来越大，建立这种联系变得更加困难。笔记本电脑尺寸的屏幕很接近观众，但宽屏桌面显示器的尺寸与电视屏幕大致相当。人们与桌面设备屏幕相距一臂之遥，但他们与电视之间的距离却很远。

然而，尽管您无法确定用户与屏幕的距离，但您可以尝试使用适当的文字大小。在较小的屏幕上使用较小的文字，在较大的屏幕上使用较大的文字。

当屏幕尺寸变宽时，您可以使用媒体查询来更改 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。

行长

网络不是打印的，但是我们可以从平面世界中汲取经验，并将其应用到网络上。

罗伯特·布莱克特在他的经典著作《排版风格的要素》中对行长（或计量单位）进行了说明：

对于采用 Serif 字体的文字大小的单列网页集而言，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;

组合和规模

在构建界面时，请记得优先考虑层次结构，以便实现更清晰的界面并让页面更流畅。一种很好的方法是在您的设计系统中内置排版缩放。

网络字体

字体就像是字词的语音。在很长一段时间里，网络上只有几种字体选项可供选择。系统字体是唯一选项。但现在，您可以选择与您的内容风格相符的网页字体。

使用 @font-face 告知浏览器在哪里可以找到您的网络字体文件。使用 woff2 作为网页字体格式。它得到了很好的支持，可以实现最佳的性能提升效果。

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

但是，您添加的每个网页字体文件都可能会使用户体验变差，因为它们会增加网页加载时间。请注意，设计不仅仅关乎最终像素的外观。这些像素的绘制速度是用户体验的一个关键部分。快捷的体验就是良好的用户体验。

字体加载

您可以要求浏览器尽快开始下载字体文件。将引用网页字体文件的 link 元素添加到文档的 head 中。值为 preload 的 rel 属性会告知浏览器优先处理该文件。值为 font 的 as 属性用于告知浏览器该文件是什么类型。您可以使用 type 属性指定更具体的提示。

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

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

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

在显示任何文本之前，不妨先等待片刻。如果在该时间之前加载网页字体，文本将以网页字体显示，但不会发生内容偏移。如果在时间结束后网页字体仍未加载，系统会使用系统字体显示文本，以便至少用户可以阅读内容。

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

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

如果您想在文本渲染后继续使用系统字体，请将 font-display 值设置为 fallback。

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

可变字体

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

可变字体则通过使用一个文件来解决此问题。无需针对常规字体、粗体、特粗等使用单独的文件，可变字体文件具有自适应能力。其中包含要在各种粗细或样式中显示它所需的所有信息。

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

在网络上的排版要优良的排版不仅仅取决于您作为一名设计人员做出的选择。响应式排版也要尊重用户的设备和网络连接。最终，无论用户以何种方式观看广告，都能获得恰到好处的设计。

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

检查您的理解情况

测试您对排版知识的掌握情况