和创客贴类似的网站,做网站用什么团建,网站开发需要哪些岗位,自己做的小网站当前内容所在位置#xff08;可进入专栏查看其他译好的章节内容#xff09; 第四部分 视觉增强技术 ✔️【第 12 章 CSS 排版与间距】 ✔️ 12.1 间距设置 12.1.1 使用 em 还是 px12.1.2 对行高的深入思考12.1.3 行内元素的间距设置 12.2 Web 字体12.3 谷歌字体12.4 font-fac… 当前内容所在位置可进入专栏查看其他译好的章节内容 第四部分 视觉增强技术 ✔️【第 12 章 CSS 排版与间距】 ✔️ 12.1 间距设置 12.1.1 使用 em 还是 px12.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 readability12.6.1 正文的字间距 Body copy spacing12.6.2 标题、小元素和间距 Headings, small elements, and spacing 12.7 本章小结 Summary 《CSS in Depth》新版封面 译者按 终于来到了本章的最后一节内容首先恭喜那些和我一起一步一个脚印学到这里的朋友们。其实学到这里说一点都不累肯定是骗人的因为这一章介绍了大量不怎么接触到的知识也是我平时大概率会跳过的内容更何况学完还得在本地运行一下代码最后消化完每个章节的知识点还得结合第一版一字一句地完成新版内容的翻译。这些细枝末节的东西如果想得太多自己很可能就断更了。之所以能更到第 78 篇完全是因为我坚信当前所做的一切都是值得的。毕竟谁能率先在当前心浮气躁的大环境中沉下心来不断深耕夯实基础谁就能早一天迎来真正的曙光。愿共勉之。 12.6 调整字间距提升可读性 Adjusting space for readability
让我们再回到页面上。此时的 Web 字体 Roboto 和 Sansita 已加载完毕我们可以按照设计稿再调整一下。这里涉及两个属性propertiesline-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 与 rem2.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 本章小结 附录 附录ACSS 选择器参考附录BCSS 预处理器简介
