如果您没有为文本指定任何样式，浏览器将会应用其自己的默认样式。这些称为用户代理样式表，可能会因浏览器而异。用户也可以设置自己的文本显示偏好设置。
如果您未指定行长，浏览器将在屏幕边缘自动换行文本行。因此，网页上的文字在默认情况下是响应式的，文字会根据用户的视口进行流动。
但文字在屏幕上显示时，并不意味着它就读起来舒适。良好的排版的关键在于以适当的方式呈现文本。排版不仅仅是选择合适的字体来使用。您需要考虑用户的偏好、文本大小、行长和文本行之间的距离。
文字大小
很难确定网页上的文字尺寸应该是多少。
如果有人使用小屏幕，可以放心，他们的屏幕会非常靠近他们的眼睛，一只手的距离有多远。
但随着屏幕变得越来越大，建立这种联系变得愈发困难。笔记本电脑大小的屏幕可能非常靠近观看器，但宽屏台式机显示器的尺寸和电视屏幕差不多。人们离桌面屏幕只有一臂远，但距离电视却有很远的距离。
然而，虽然您无法确定用户与屏幕之间的距离，但可以尝试使用可能适合于使用的文本大小。请为较小的屏幕使用较小的文字大小，为较大的屏幕使用较大的文字大小。
当屏幕尺寸变宽时，您可以使用媒体查询更改 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。
行长
网络不是平面媒体，但我们可以从平面世界中吸取教训并应用到网络。
在他的经典著作《《排版样式的元素》中）中，罗伯特·布林赫斯特 (Robert Bringhurst) 提到了行长（或测量）：
45 到 75 个字符之间的任何字符都被广泛认为是采用 Serif 格式的单列页面以文本大小显示且令人满意的行长度。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 作为网页字体格式。该 API 受到良好支持，并且具有最佳的性能提升效果。
@font-face {
font-family: Roboto;
src: url('/fonts/roboto-regular.woff2') format('woff2');
}
body {
font-family: Roboto, sans-serif;
}
但是，您添加的每个网页字体文件都可能会降低用户体验，因为这会增加网页加载时间。请记住，设计不仅仅关乎最终像素的外观。这些像素的绘制速度是影响用户体验的关键部分。快节奏体验就是良好的用户体验。
字体加载
您可以请求浏览器尽快开始下载字体文件。在文档的 head 中添加引用网页字体文件的 link 元素。值为 preload 的 rel 属性会告知浏览器优先加载该文件。值为 font 的 as 属性可告知浏览器这是哪类文件。您可以使用 type 属性进一步指定文件的具体类型。
<link href="/fonts/roboto-regular.woff2" type="font/woff2"
rel="preload" as="font" crossorigin>
即使您自行托管字体文件，也需要添加 crossorigin 属性。
使用 CSS font-display 属性告知浏览器如何管理从系统字体到网页字体的切换。您可以选择在网页字体加载完成之前不显示任何文字。您可以选择立即显示系统字体，然后在网络字体加载后立即切换到该字体。这两种策略都有自己的缺点。如果您等到网页字体下载完毕之后再显示任何文字，用户可能会发现自己长时间盯着空白页，这很不好意思。如果您先以系统字体显示文字，然后切换到网页字体，则网页上的内容可能会出现不协调的偏移。
比较理想的折中方案是等待片刻，然后再显示任何文本。如果网页字体在此期限结束之前加载，则文字会以网络字体显示，且内容不会偏移。如果时间过后网络字体仍未加载，系统会使用系统字体显示文本，以便至少用户可以阅读内容。
如果您仍希望网络字体在每次网络字体最终加载时替换系统字体，请使用 swap 的 font-display 值。
body {
font-family: Roboto, sans-serif;
font-display: swap;
}
如果您希望在文本渲染后继续使用系统字体，请使用 fallback 的 font-display 值。
body {
font-family: Roboto, sans-serif;
font-display: fallback;
}
变量字体
如果您使用大量不同的粗细或相同字体的样式，您最终可能会使用大量单独的字体文件（每种粗细或样式分别对应一个单独的字体文件）。
可变字体通过使用一个文件来解决这个问题。可变字体文件是响应式的，而不是针对常规、粗体、特粗等使用单独的文件。它包含一系列权重或样式需要显示的所有信息。
这意味着，单个可变字体文件大于单个常规字体文件，但单个可变字体文件可能比多个常规字体文件小。如果您使用大量不同的粗细，可变字体可以显著提升性能。
出色的网页排版不仅仅是设计人员可以选择的字体。自适应排版还注重尊重用户的设备和网络连接。最终打造出无论用户以何种方式观看都能感觉良好的设计。
现在，您已经掌握了自适应文字，是时候深入了解自适应图片了。
检查您的掌握程度
测试排版知识
必须添加样式，文本才能在视口中自动换行。
clamp() 适用于流式排版，因为
calc() 函数clamp() 进行排版的好理由。clamp() 进行排版的好理由。此指南中推荐使用哪种类型的 line-height 值？
24pxline-height 使用像素值。2rem1.52vwline-height 这样的视口单元有问题。font-display的用途是什么？
block 或 inline-block。