当前内容所在位置（可进入专栏查看其他译好的章节内容）
- 第四部分 视觉增强技术 ✔️
- 【第 12 章 CSS 排版与间距】 ✔️
- 12.1 间距设置
- 12.1.1 使用 em 还是 px
- 12.1.2 对行高的深入思考
- 12.1.3 行内元素的间距设置
- 12.2 Web 字体
- 12.3 谷歌字体
- 12.4 @font-face 的工作原理
- 12.4.1 字体格式与回退处理
- 12.4.2 同一字型的多种变体形式
- 12.5 性能因素考量
- 12.5.1 font-display 属性解析
- 12.5.2 可变字体的用法
- 12.6 调整字间距，提升可读性 ✔️
- 12.6.1 正文的字间距 ✔️
- 12.6.2 标题、小元素和间距 ✔️
- 12.7 本章小结 ✔️
文章目录
- 12.6 调整字间距，提升可读性 Adjusting space for readability
- 12.6.1 正文的字间距 Body copy spacing
- 12.6.2 标题、小元素和间距 Headings, small elements, and spacing
- 12.7 本章小结 Summary
《CSS in Depth》新版封面
译者按
终于来到了本章的最后一节内容，首先恭喜那些和我一起一步一个脚印学到这里的朋友们。其实学到这里说一点都不累肯定是骗人的，因为这一章介绍了大量不怎么接触到的知识，也是我平时大概率会跳过的内容；更何况学完还得在本地运行一下代码，最后消化完每个章节的知识点还得结合第一版一字一句地完成新版内容的翻译。这些细枝末节的东西如果想得太多，自己很可能就断更了。之所以能更到第 78 篇，完全是因为我坚信当前所做的一切都是值得的。毕竟，谁能率先在当前心浮气躁的大环境中沉下心来不断深耕，夯实基础，谁就能早一天迎来真正的曙光。愿共勉之。
12.6 调整字间距，提升可读性 Adjusting space for readability
让我们再回到页面上。此时的 Web 字体 Roboto 和 Sansita 已加载完毕，我们可以按照设计稿再调整一下。这里涉及两个属性（properties）：line-height 和 letter-spacing。它们可以控制文本行之间的距离（垂直方向）和单个字符之间的距离（水平方向）。
很多开发者往往不太看重这两个属性。如果在页面开发过程中多花点时间调整它们，整个网站的外观都将得到显著改善。除此之外，还可以让用户阅读更加舒适，从而增加用户黏性。
如果文字间距太过紧凑，多读几句话甚至多看几个字都会明显感觉费劲；要是间距过大也会有同样的问题。图 12.16 展示了多个不同间距的文字版本。
【图 12.16 文字间距会对阅读体验产生显著影响】
试着读一下左上方的压缩版文字，就会发现需要更加集中注意力才行。可能一不小心就漏掉一行或者重复阅读同一行，而且很快就读不下去了。这样的页面显得拥挤不堪，毫无条理。而左下方的文字又过于分散了些，致使每个字母都占用了太多注意力，不太容易在大脑里组合成单词。相比之下，右上方的文字就舒服多了，看上去“刚刚好”，是这三个版本中最容易阅读的。
12.6.1 正文的字间距 Body copy spacing
为 line-height 和 letter-spacing 找到合适的值是件主观性很强的事。最好的解决方案通常是多试几个值；如果找到某两个值一个过于紧凑、另一个过于松散，那就取介于二者之间的某个值。所幸，下面介绍的这些经验法则可以为您提供帮助。
line-height 属性的初始值（initial value）是关键字 normal，大概等于 1.2（确切的数值是在字体文件中编码的，它们取决于字体的 em 大小）；但是在大部分情况下，这个值偏小。对于正文内容而言，行高介于 1.4 到 1.6 之间较为理想。
我们已经在上一章为 <body> 元素设置了 1.4 倍行高。这个值会被页面中的其他元素继承。试想如果没有了这个行高值页面会怎样渲染。图 12.17 展示了其中一个板块的前后效果对比。在左侧的版本中，line-height 和 letter-spacing 属性均为初始值；而右侧的版本是调整后的效果（我们的目标是把字间距调整为右侧的版本）。
【图 12.17 Ink 页面的一个板块效果对比，其中左侧为原始的字间距效果，右侧为手动调整后的效果】
把 line-height 的值改为 1.3 或者 1.5，看看效果如何。是不是比之前 1.4 倍行距的效果好一些。
提示
一段文字越长，行高也应该相应越大。这样读者的眼睛才更容易扫到下一行，而不会分散注意力。理想情况下，每行文字的长度应该控制在 45 至 75 个字符之间，一般认为这样的长度最利于阅读。
接着再来看看 letter-spacing 属性。如果用的是精心设计过的字体，可能并不需要调整默认的字间距，但偶尔适当的调整也可以进一步提高可读性，因此还是有必要带您过一遍，看看如何进行修改。修改该属性的另一个应用场景还可以是出于风格方面的考虑，对页面上的某些位置（如按钮或标题）进行微调。
letter-spacing 属性需要一个长度值，用来设置每个字符间的间距。即使只设置 1px，也是很夸张的字间距了；因此它应该是一个非常小的值。在尝试找到最佳属性值的过程中，通常我会每次只增加 1em 的 1/100（例如 letter-spacing: 0.01em）。请根据代码清单 12.12 同步更新本地样式表中的字间距。
代码清单 12.12 在 body 元素上设置字间距
@layer global {
body {
margin: 0;
font-family: Roboto, sans-serif;
line-height: 1.4; /* 行高和字间距将被页面上的所有元素继承 */
letter-spacing: 0.01em; /* 在各字符之间再添加 0.01em 的字间距 */
background-color: var(--extra-light-gray);
color: var(--text-color);
}
}
不妨尝试将字间距增至 0.02em 或 0.03em，看看页面效果如何。您可能不具备设计师的专业眼光，没办法确定哪种效果更好；但是没关系，跟着感觉走就行了。如果还是有疑虑，那就保守一点，不要设置得太开。我们的目的不在于吸引用户注意字间距，而是恰恰相反。在 Ink 页面上，我发觉 0.01em 和 0.02em 看着都不错，那就保守一点选用 0.01em。
把行距和字距转换为 CSS 样式
在设计领域，文本行之间的距离称为 行距（leading），与单词 bedding 谐音。它起源于印刷版每行文字之间添加的一条条铅引导线。而字符之间的距离则称为 字距（tracking）。如果与设计师一起工作，它们可能会在设计稿中指明行距和字距，但这些尺寸看起来和 CSS 中的
line-height和letter-spacing属性完全不沾边。行距一般以 “点（point）” 为单位进行描述，例如
18pt，代表的是一行文字的高度加上它与下一行文字之间的距离。这其实与 CSS 中的line-height类似，只不过没有用不带单位的数字来描述罢了。实际转换时必须像定义字号那样，先将行距转为像素尺寸，然后再计算出对应的不带单位的行高值。而要把
pt单位转为px单位，需将pt值乘以1.333（因为 1 英寸为96px，并且 1 英寸也等于72pt，因此96 / 72 = 1.333px/pt）。因此18pt × 1.333px/pt = 24px。然后除以字号，就得到了不带单位的行高值，即24px / 16px = 1.5。而字距（tracking）通常会给定某个数字，例如
100。因为一个单位的该数字表示1em的千分之一，因此除以1000就可以转为em单位值，即100 / 1000 = 0.1em。
12.6.2 标题、小元素和间距 Headings, small elements, and spacing
标题的间距通常和正文内容不太一样。正文间距调整好后，需要检查一下标题，看看是否也需要调整。
标题一般比较简短，通常只有几个字，但即便偶尔才会遇到长标题，页面样式也应该考虑这种情况。在页面设计时常犯的一个错误就是只测试短标题。既然页面行高已经设定，就可以试着给各级标题添加文字内容，看看标题强制换行后的效果如何（如图 12.18）。
【图 12.18 让标题强制换行，看看行高是否合适】
在本例中，由于垂直间距看上去还可以，这里就不做修改了。但检查行高这一步绝不能少。有时候 1.4 倍行高可能会显得有点宽，这也要看所选用的字型（typeface），尤其是设置大字号的时候。我曾经遇到过一些网站就是这样的情况，最后不得不把标题的行高调低到 1.0。
而对于正文主体而言，调整间距的重点在于使用户的阅读体验效果最佳。但对于标题以及其他内容偏少的页面元素（如按钮）来讲，这一点影响不大。这时字间距的可调节范围就大大增加了，也可以有更多发挥想象的空间了，甚至可以使用负的字间距来让文字渲染得更加紧凑。例如图 12.19 里的标语就声明了 letter-spacing: -0.02em 的样式。
【图 12.19 页面上内容简短、风格鲜明的部分，可以考虑使用更为紧凑的字符间距】
上述样式的间距变化还是很明显的（dramatic）。如果是几段文件都用这样的间距样式，阅读起来就会很费劲；但对于小段文本效果还不错（也就几个字）。于是标题就按这个版本设置，并根据代码清单 12.13 同步更新本地样式表。
代码清单 12.13 紧凑版标语的字间距设置
.hero h2 {
margin-block: 0 10px;
font-size: 1.95rem;
letter-spacing: -0.02em; /* 利用负的 letter-spacing 来压缩字间距 */
}
我们也可以重新评估一下页面小型元素的间距和文本，例如按钮。在我看来此时的按钮看起来稍微偏大了些，尤其是页头的导航按钮部分。我们来调整一下。图 12.20 展示了现在的效果（上）以及调整后的效果（下）。
【图 12.20 调整文本属性可以改善导航按钮的外观】
这里做了如下调整：减小字号，使用 text-transform 把字母转为大写，并上调字符间距（letter spacing）。
提示
通常字母全部大写的文字再配合较大的字间距，看上去效果会更好一些。
要实现上述效果，请将代码清单 12.14 中带注解内容的样式声明同步到本地样式表中。
代码清单 12.14 调整导航菜单项上的尺寸和间距样式
.nav-container__inner {
display: flex;
justify-content: space-between;
align-items: end; /* 令导航容器中的元素底部对齐 */
max-inline-size: 1080px;
margin-inline: auto;
padding: 0.625em 0;
}
...
.top-nav a {
display: block;
font-size: 0.8rem; /* 减小导航链接和按钮的字号 */
padding: 0.3rem 1.25rem; /* 将内边距的值由 em 改为 rem */
color: var(--white);
background: var(--brand-green);
text-decoration: none;
border-radius: 3px;
text-transform: uppercase; /* 将导航链接改为大写 */
letter-spacing: 0.03em; /* 增加字间距 */
}
因为调小了导航链接的字号，所以它们将不再填充 nav-container 内容盒的高度。默认情况下这些链接元素是顶部对齐的，下方会空出一些区域。将 nav-container 的弹性子元素设为底部对齐（即 align-items: end）就可以解决这个问题。
由于导航元素的字号已经改变，其内边距（之前以相对单位 em 来设置大小）也会随之改变。为此，这里将尺寸单位改为 rem。当然也可以通过计算得出新的以 em 为单位的相对尺寸，但这样做并不值得。
text-transform 属性可能较为陌生。它可以把所有字母改为大写，无论在 HTML 中是如何书写的。这里强烈推荐这种方式，而不是到 HTML 里手动将文字改为大写。这样依赖，如果将来设计稿修改了，就可以只改一行 CSS，而不必在所有 HTML 页面的多个位置进行修改。只有当需要遵循某种语法规则的大写（例如首字母缩略词）时，才应该在 HTML 中大写。而像本例这样只是单纯出于设计上的考虑而渲染的大写形式，仅通过 CSS 就能实现。
text-transform 属性的另一个合法值为 lowercase，用于将所有字母转为小写。此外还可以设为 capitalize，用于将每个单词的首字母转为大写形式、其余字母保持 HTML 中的原始写法。
12.7 本章小结 Summary
- 文本的行高会影响元素所在的内容盒尺寸。在对页面间距进行微调时需要将这个高度纳入考虑范围。
- 利用谷歌字体这样的字体托管服务，Web 字体可以轻松集成到页面中。
- 利用
@font-face规则可以轻松托管自己的 Web 字体。该规则可以定义字体名称、限定字体粗细及各种字体样式。 - Web 字体会占用大量的页面空间；为此需要限制 Web 字体的数量，并尽可能选用可变字体，让页面进一步轻量化。
font-display属性用于控制页面在 Web 字体加载时的初始渲染方式。- 文字间距的调节可通过
line-height和letter-spacing属性实现。正文内容的行高通常在接近1.5时效果最佳；而对于大标题，保持较小的间距往往效果更好。
关于《CSS in Depth》（中译本书名《深入解析 CSS》）
| 第 1 版 | 第 2 版 | |
|---|---|---|
| 读者评分 | 原版：4.7（亚马逊）；中文版：9.3（豆瓣） | 原版：5.0（亚马逊）；中文版：暂无，待出版 |
| 出版时间 | 原版：2018 年 3 月；中文版：2020 年 4 月 | 原版：2024 年 7 月；中文版：暂无，待出版 |
| 原价 | 原版：$44.99；中文版：￥139.00 | 原版：$59.99；中文版：暂无，待出版 |
| 现价 | 原版：$36.49；中文版：￥52.54 起步 | 原版：$52.09；中文版：暂无，待出版 |
| 原版国内预订 | 起步价 ￥461.00 | 起步价 ￥750.00 |
本专栏为该书第 2 版高分译文专栏，全网首发，精译精校，持续更新，计划今年内完成全书翻译，敬请期待！！！
目前已完结的章节（可进入本专栏查看详情，连载期间完全免费）：
- 第一章 层叠、优先级与继承（已完结）
- 1.1 层叠
- 1.2 继承
- 1.3 特殊值
- 1.4 简写属性
- 1.5 CSS 渐进式增强技术
- 1.6 本章小结
- 第二章 相对单位（已完结）
- 2.1 相对单位的威力
- 2.2 em 与 rem
- 2.3 告别像素思维
- 2.4 视口的相对单位
- 2.5 无单位的数值与行高
- 2.6 自定义属性
- 2.7 本章小结
- 第三章 文档流与盒模型（已完结）
- 3.1 常规文档流
- 3.2 盒模型
- 3.3 元素的高度
- 3.4 负的外边距
- 3.5 外边距折叠
- 3.6 容器内的元素间距问题
- 3.7 本章小结
- 第四章 Flexbox 布局（已完结）
- 4.1 Flexbox 布局原理
- 4.2 弹性子元素的大小
- 4.3 弹性布局的方向
- 4.4 对齐、间距等细节处
- 4.5 本章小结
- 第五章 网格布局（已完结）
- 5.1 构建基础网格
- 5.2 网格结构剖析 （上）
- 5.2.1 网格线的编号（下）
- 5.2.2 网格与 Flexbox 配合（下）
- 5.3 两种替代语法
- 5.3.1 命名网格线
- 5.3.2 命名网格区域
- 5.4 显式网格与隐式网格（上）
- 5.4.1 添加变化 （中）
- 5.4.2 让网格元素填满网格轨道（下）
- 5.5 子网格（全新增补内容）
- 5.6 对齐相关的属性
- 5.7 本章小结
- 第六章 定位与堆叠上下文（已完结）
- 6.1 固定定位
- 6.1.1 创建一个固定定位的模态对话框
- 6.1.2 在模态对话框打开时防止屏幕滚动
- 6.1.3 控制定位元素的大小
- 6.2 绝对定位
- 6.2.1 关闭按钮的绝对定位
- 6.2.2 伪元素的定位问题
- 6.3 相对定位
- 6.3.1 创建下拉菜单（上）
- 6.3.2 创建 CSS 三角形（下）
- 6.4 堆叠上下文与 z-index
- 6.4.1 理解渲染过程与堆叠顺序（上）
- 6.4.2 用 z-index 控制堆叠顺序（上）
- 6.4.3 深入理解堆叠上下文（下）
- 6.5 粘性定位
- 6.6 本章小结
- 第七章 响应式设计（已完结）
- 7.1 移动端优先设计原则（上篇）
- 7.1.1 创建移动端菜单（下篇）
- 7.1.2 给视口添加 meta 标签（下篇）
- 7.2 媒体查询（上篇）
- 7.2.1 深入理解媒体查询的类型（上篇）
- 7.2.2 页面断点的添加（中篇）
- 7.2.3 响应式列的添加（下篇）
- 7.3 流式布局
- 7.4 响应式图片
- 7.5 本章小结
- 第八章 层叠图层及其嵌套
- 8.1 用 layer 图层来操控层叠规则（上篇）
- 8.1.1 图层的定义（上篇）
- 8.1.2 图层的顺序与优先级（下篇）
- 8.1.3 revert-layer 关键字（下篇）
- 8.2 层叠图层的推荐组织方案
- 8.3 伪类 :is() 和 :where() 的用法
- 8.4 CSS 嵌套的使用
- 8.4.1 嵌套选择器的使用
- 8.4.2 深入理解嵌套选择器
- 8.4.3 媒体查询及其他 @规则 的嵌套
- 8.5 本章小结
- 第九章 CSS 的模块化与作用域
- 9.1 模块的定义
- 9.1.1 模块和全局样式
- 9.1.2 一个简单的 CSS 模块
- 9.1.3 模块的变体
- 9.1.4 多元素模块
- 9.2 将模块组合为更大的结构
- 9.2.1 模块中多个职责的拆分
- 9.2.2 模块的命名
- 9.3 CSS 的作用域
- 9.3.1 CSS 作用域的就近原则
- 9.3.2 划定作用域的边界
- 9.3.3 CSS 中的隐式作用域
- 9.3.4 关于 CSS 作用域与层叠图层
- 9.4 CSS 模式库
- 9.5 本章小结
- 第十章 CSS 容器查询
- 10.1 容器查询的一个简单示例
- 10.1.1 容器尺寸查询的用法
- 10.2 深入理解容器
- 10.2.1 容器的类型
- 10.2.2 容器的名称
- 10.2.3 容器与模块化 CSS
- 10.3 与容器相关的单位
- 10.4 容器样式查询的用法
- 10.4.1 将模块与所在容器解耦
- 10.4.2 减少重复代码
- 10.5 本章小结
- 第 11 章 颜色与对比
- 11.1 通过对比进行交流
- 11.1.1 模式的建立
- 11.1.2 还原设计稿
- 11.2 颜色的定义
- 11.2.1 色域与色彩空间
- 11.2.2 CSS 颜色表示法（RGB、Hex、HSL、HWB、LAB/OKLAB、LCH/OKLCH）
- 11.3 利用 OKLCH 处理颜色（上篇）
- 11.3.4 从页面其他颜色衍生出新颜色（下篇）
- 11.4 思考字体颜色的对比效果
- 11.5 本章小结
- 附录
- 附录A：CSS 选择器参考
- 附录B：CSS 预处理器简介
