【CSS in Depth 2 精译_075】12.2 Web 字体简介 + 12.3 谷歌字体的用法

当前内容所在位置（可进入专栏查看其他译好的章节内容）

第四部分视觉增强技术 ✔️
【第 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.2 Web 字体 Web fonts
- 12.3 谷歌字体 Google fonts

《CSS in Depth》新版封面

《CSS in Depth》新版封面

译者按
结束了设计稿的间距样式微调，从本篇开始再来了解一下 CSS 排版方面的知识。首先就是本篇介绍的 Web 字体，尤其是像谷歌字体这样的线上 Web 字体的引用。时隔六年，作者对相关内容进行了全面更新，对其中个别段落还补充了必要的截图，方便各位了解 Web 字体的相关操作。一起来先睹为快吧！

12.2 Web 字体 Web fonts

接下来，我们将通过添加自定义字体来让页面效果再上一个新台阶。迄今为止，我都没在示例页面的设计稿中囊括这些内容，但设计师几乎肯定会在其设计作品中指定网页字体。

页面设计可谓成也字体，败也字体。多年来，Web 开发者只能从很有限的字体库中做选择，即所谓的 Web 安全字体（web-safe fonts）。这些字体类型（font families）包括 Arial、Helvetica、Georgia 等，且绝大多数用户的操作系统都会安装。早期的浏览器只能使用这些系统字体来渲染页面，因此也不得不使用它们来进行网页开发。即便偶尔也可能指定某个非系统字体，比如 Helvetica Neue，但也只有那些碰巧安装了这款字体的用户才能正确渲染，而其他用户只能看到更通用的字体回退方案。

随着 Web 字体的兴起，情况改变了。Web 字体可以通过 @font-face 规则来告诉浏览器去哪儿检索并下载页面所需的自定义字体。使用自定义字体后，原本平淡无奇的页面也可以大有改观，仿佛开启了一个全新的世界，让人们有了更多选择与想象的空间。

不同的页面字体会带来不同的观感体验，或灵动活泼、或有板有眼；或沉稳可信、或不拘一格。如图 12.9 所示，对同一段文字分别使用了三组不同的字体。在左上角的示例中，标题用的是 News Cycle 字体，而正文则用的是 EB Garamond；这样看起来比较正式，一般出现在新闻报纸类网站中。而右上角的案例则分别使用了 Forum 和 Open Sans 字体，视觉效果就没那么正式，可用于个人博客或者小型技术公司。最后左下方的案例用到的字体分别是 Anton 和 Pangolin，显得比较活泼，甚至略带卡通风格，适用于儿童类网站。以上三个案例，仅仅只是变更了一下字体，别的什么都没做，就可以营造出截然不同的页面氛围。

图 12.9 不同的字体会显著影响网站的整体观感

【图 12.9 不同的字体会显著影响网站的整体观感】

通过在线服务来使用 Web 字体是最简单、可能也是最普遍的方式。常见的有 谷歌字体（Google Fonts，详见：https://fonts.google.com/）与 Adobe 字体（Adobe Fonts，详见：https://fonts.adobe.com/）。

无论收费还是免费，这些服务都可以解决很多问题，包括技术上（如托管服务）和法律上（如授权许可）的一些问题。它们都提供了大量可供选择的字体库；但偶尔也遇到某个特殊字体仅对付费用户开放，并且还得自行处理托管事宜。

由于谷歌字体提供了很多高质量且开源的字体（而且是免费的），接下来我将带您了解利用这项服务将 Web 字体添加到页面的具体方法。因为谷歌做了大量的工作，所以添加字体非常简单。然后我们将深入研究它的底层运行逻辑，看看它究竟是怎么工作的、又是如何托管自己的字体的。

本章将沿用之前构建的示例页，并通过 Web 字体来完善页面设计。完成后的页面渲染效果如图 12.10 所示。图中大部分内容用的是 Roboto 字体，它也是整个页面主要的正文字体；而标题使用的是 Sansita 字体。

图 12.10 启用了 Sansita 和 Roboto 这两款 Web 字体的页面局部效果

【图 12.10 启用了 Sansita 和 Roboto 这两款 Web 字体的页面局部效果】

让标题和正文分别使用两种不同的字体是很常见的做法。通常情况下，其中一种字体是 衬线（serif）字体，而另一种则为 无衬线（sans serif）字体。但本例中的两种字体都是无衬线类型。此外还可能见到有的设计标题和正文用的是相同的字体，但字体粗细各不相同的情况。

定义

衬线（serif） 是某字符笔画末端的小线条或者“爪状”修饰效果。包含衬线的字体就被称为 衬线字体（serif typeface）（例如 Times New Roman）；而没有衬线效果的字体则被称为 无衬线字体（sans serif typeface）（例如 Helvetica）。

12.3 谷歌字体 Google fonts

访问谷歌字体网站 https://fonts.google.com/，就可以看到谷歌字体中当前可用的字体目录。该网站通过网格板块的方式来展示这些字体（如图 12.11 所示）。您可以直接从页面上选择字体，或者通过页面顶部的搜索栏或左侧的筛选工具来检索特定字体。

图 12.11 谷歌字体的字体选择界面

【图 12.11 谷歌字体的字体选择界面】

单击其中某个字体将显示更多详情信息，包括可用的字体粗细（细体、常规、粗体）及字体样式（常规或斜体）的列表。在屏幕的右上角有个获取该字体（“Get font” 字样）的按钮。点击该按钮会将其添加到已选字体中，并可通过点击右上角的小购物袋图标来预览选中的字体。

如果知道需要什么样的字体，就可以通过字体名称来快速检索。在搜索栏中输入 Sansita 后，就会从主视图中筛选掉其他无关字体。点击 Sansita 字体进入详情页，然后点击获取字体按钮（即 “Get font” 字样的按钮）将其添加到已选字体中。这样相当于添加了该字体的所有粗细和样式，稍后再做进一步细化。

然后返回谷歌字体首页（点击顶部的 Google Fonts 图标）。在搜索框输入 Roboto，Google 会找出好几种相关字体，其中包括 Roboto、Roboto Condensed、Roboto Slab 等。点击 Roboto 字体并将其添加到已选字体中。

【译注】

感觉这里有必要补充一个截图，以免过于抽象：

【补图1：进入某字体详情页后，点击右上角的按钮可将当前字体列入已选字体中】

再点击上图右上角的购物袋图标，即可看到当前已选中的所有字体：

【补图2：点击右上角的购物袋图标，可以查看当前已选中的所有谷歌字体】

这样一来，页面就会显示 “2 font families selected” 字样（即 “已选中两个字体类型”）。页面右侧有两个按钮，按钮 “Get Embed Code”（获取嵌入式代码）负责提供嵌入这些字体所需的 CSS（如图 12.12 所示）；而按钮 “Download all”（即 “全部下载”）则可以将所选字体下载到本地。我们先点击第一个按钮。

图 12.12 左侧为当前选中的字体列表，右侧则显示对应的嵌入式代码

【图 12.12 左侧为当前选中的字体列表，右侧则显示对应的嵌入式代码】

到现在为止，您已经熟悉了常规和粗体字的粗细设置，但某些字体还支持多种不同的粗细尺寸。例如，Roboto 字体共有六种不同的粗细，范围从细体（thin）到特粗体（black）不等，同时每一种粗细还有对应的斜体字格式。请注意，除了使用细体（thin）、常规（regular）、粗体（bold）、黑体（black）外，字体粗细（weights）还可以用数值来表示，例如 100、400、700 和 900 等等。

说明

字型（typeface） 和 字体（font） 这两个术语经常被混为一谈。字型是指字体的整个家族（例如 Roboto），通常由同一位设计师创建；一种字型可能会存在多种样式变体或粗细形式（例如细体（light）、粗体（bold）、斜体（italic）、压缩（condensed）等等）。这些变体的每一个都可以称之为一种 字体（font）。

理想情况下，您可以选择字体所有的变体形式来为您的页面设计提供丰富的选择。然而，要添加的字体越多，意味着浏览器要同步下载的内容也会增多，从而让 Web 字体成为仅次于图片的、拖慢页面加载速度的几个罪魁祸首之一。为此，一种名为 可变字体（variable fonts） 的全新技术应运而生，可以在一个更轻量的文件中实现多个变体形式的嵌入，本章稍后会为您演示其用法；但要是该方案并不具备实施条件，就应该更加慎重，只选取真正需要的字体。

一开始，字体的所有粗细版本都会被选中。在每个选中的字体下方，点击 “Change styles” 按钮（即 “变更样式”），并取消选中除了 Roboto 中的 Light 300、以及 Sansita 中的 ExtraBold 800 以外的所有粗细样式。剩下的这两个才是页面需要的字体粗细。通常还需要准备正文主体文字的斜体字版本，但在本例中无需考虑。

然后根据代码清单 12.6 所示的样式，将 <link> 标签复制到示例页的 <head> 元素中。这样就把包含字体描述的样式表添加到了示例页。此时页面会有两个样式表：一个是您自己的，而另一个则是字体的专属样式表。

此外，代码中还包含两个设置了 preconnect 预连接的 <link> 元素。它们是给浏览器的提示信息，用于告诉浏览器 Web 字体需要加载来自如下 Google 域名的资源，以便在解析 HTML 时预先进行连接，从而让样式表在后续解析到它们时，进一步提升字体的加载速度。

代码清单 12.6 引入谷歌字体样式的 <link> 标签写法

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&family=Sansita:wght@800&display=swap"
  rel="stylesheet"
/>

有了这个样式表，Web 字体的设置就能完全交给 Google 打理了。设置完成后就能在样式中使用这些字体了。将上述代码添加到本地页面，将得到如图 12.13 所示的页面效果：

图 12.13 使用了 Roboto 字体及 Sansita 字体后的页面效果

【图 12.13 使用了 Roboto 字体及 Sansita 字体后的页面效果】

要让相应的字体生效，需要通过 font-family 属性来指定 Roboto 字体或 Sansita 字体。为此，得再更新一下 CSS。先在 <body> 标签中指定正文字体 Roboto，这样整个网页都将继承该字体；然后将各级标题的字体、以及首页连接元素 home-link 的字体均设置为 Sansita。最后根据下列样式代码更新示例页面即可（要改动的位置已用注释说明）。

代码清单 12.7 使用 Web 字体的示例样式代码

@layer global {
  body {
    margin: 0;
    font-family: Roboto, sans-serif; /* 对页面全局应用 Roboto 字体 */
    line-height: 1.4;
    background-color: var(--extra-light-gray);
  }

  h1, h2, h3, h4 {
    font-family: Sansita, serif; /* 各级标题设为 Sansita 字体 */
  }
}

/* ... */

@layer modules {
  .home-link {
    color: var(--text-color);
    font-size: 1.6rem;
    font-family: Sansita, serif; /* 左上角的首页链接设为 Sansita 字体 */
    font-weight: bold;
    text-decoration: none;
  }
}

由于页面添加了谷歌字体样式表，浏览器就能正确解析这些字体设置并将其关联到已下载的 Web 字体上，最终让对应字体生效。如果使用其他的 Web 字体服务（例如 Adobe 字体），那么整个过程也是大同小异。这些服务要么提供所需 CSS 样式的 URL 地址，要么提供能为页面添加 CSS 样式的 JavaScript 代码片段。

接下来我们将对字体间距进行微调，并分享几个关于性能加载方面的考量因素。在这之前，先来看看谷歌字体都为我们做了哪些工作。

关于《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 预处理器简介