作为 Write for DOnations 计划的一部分，作者选择了 Diversity in Tech Fund 来接受捐赠。
介绍
网站的视觉识别很大程度上取决于两个设计原则：颜色和字体。 在过去的十年中，在向用户提供自定义字体方面取得了长足的进步，在设备上预装了更多字体，使用 @font-face 规则加载自定义字体的能力，以及使用字体托管服务。 Web 浏览器还实现了对 可变字体 的支持，这是一种可以插入多种字体的单一字体文件，提供了高度的调整和字体定制。
在本教程中，您将尝试将字体加载到您的网站上的示例。 您将使用 字体堆栈（基于可用性的字体排序）来使用可能安装在用户设备上的字体。 然后，您将使用字体托管服务 Google Fonts 来查找、选择自定义字体并将其加载到您的页面上。 最后，您将使用 @font-face 规则加载自托管字体系列，然后是自托管可变字体。
先决条件
- 了解 CSS 的级联和特异性特性，您可以通过阅读 How To Apply CSS Styles to HTML with Cascade and Specificity 获得。
- 类型选择器、组合选择器和选择器组的知识，您可以在 如何选择 HTML 元素以使用 CSS 设置样式 中找到这些知识。
- 了解 CSS 中的字体堆栈和字体属性，您可以在教程 How To Style Text Elements with Font, Size, and Color in CSS 中找到。
- 在您的本地计算机上保存为
index.html的空 HTML 文件，您可以从您选择的文本编辑器和 Web 浏览器访问该文件。 要开始使用，请查看我们的 如何设置您的 HTML 项目 教程，并按照 如何使用和理解 HTML 元素 获取有关如何在浏览器中查看 HTML 的说明。 如果您是 HTML 新手，请尝试整个 如何使用 HTML 构建网站系列。
设置 HTML 并创建初始字体堆栈
字体堆栈的概念来自早期的网络，当时只有少数值得信赖的字体可以安装在大多数计算机上。 字体通常可能不可用，因此字体堆栈提供了浏览器可以尝试查找和加载的字体顺序。 在本节中，您将了解弹性字体堆栈的原理以及现代设备上的字体可用选项。 但首先，您将创建示例 HTML 来演示字体。
首先在文本编辑器中打开 index.html。 然后，将以下 HTML 添加到文件中：
索引.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>A Demo Font Family Page</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
</body>
</html>
在 <head> 标记内，第一个 <meta> 标记定义 HTML 文件的字符集。 第二个 <meta> 标记定义移动设备应如何呈现页面。 接下来，<title> 标签赋予页面标题。 最后，<link> 标记引用了您稍后将用于创建页面样式的 CSS 文件。
接下来，在 <body> 标签内，添加页面内容。 此内容称为 Cupcake Ipsum 中的 filler content，它提供的文本看起来像内容，但实际上没有说任何内容。 填充内容在以下代码块中突出显示。 随着代码的添加和更改，您将在整个教程中遇到这种突出显示方法：
索引.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>A Demo Font Family Page</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<main>
<header>
<div class="content-width">
<h1>Sweet strawberry cheesecake</h1>
<p><em>Sweet muffin bear claw</em> donut chupa chups liquorice tiramisu candy canes sweet.</p>
</div>
</header>
<div class="content-width">
<p>Chocolate shortbread caramels tootsie roll tiramisu sweet dessert apple pie fruitcake. <strong>Croissant icing chupa chups</strong> sweet roll cake tart fruitcake soufflé jujubes. Shortbread brownie tootsie roll ice cream pudding dessert marshmallow sesame snaps. Cake pie jujubes lemon drops sesame snaps soufflé cookie jujubes wafer. Caramels ice cream fruitcake pastry cheesecake chocolate tootsie roll cake marshmallow. Pie candy canes cupcake dragée bonbon fruitcake marzipan. Tootsie roll halvah bonbon cake muffin gummies. Bonbon cotton candy marzipan cake sesame snaps chupa chups donut dessert. Macaroon gummies macaroon biscuit chocolate carrot cake gummi bears.</p>
<h2>Donut candy canes cotton candy</h2>
<p><strong><em>Liquorice gingerbread tiramisu</em></strong> pie bonbon soufflé. Jujubes tootsie roll muffin gingerbread powder. Carrot cake halvah chocolate bar tart sugar plum sugar plum pastry. Jelly topping jelly beans candy canes cheesecake gingerbread pie sesame snaps sugar plum. Pie cheesecake pudding jelly brownie jelly beans halvah. Ice cream powder carrot cake bear claw cake cheesecake.</p>
<p><em>Jelly-o jelly-o jelly</em> lollipop croissant. Carrot cake tart danish macaroon dragée gingerbread. Sugar plum cotton candy biscuit <strong>fruitcake powder liquorice</strong>. Shortbread candy pie tart pudding. Sesame snaps bear claw tart tiramisu donut chocolate cake. Cheesecake tiramisu chocolate cake dessert dessert candy candy canes apple pie marshmallow. Sweet croissant pudding toffee tootsie roll gummies tart pastry pie. Candy apple pie cake wafer tootsie roll tart icing halvah.</p>
<h3>Gingerbread gummi bears</h3>
<p><em>Tiramisu sweet pastry</em> danish topping ice cream caramels. Tiramisu candy liquorice jelly-o marzipan candy canes cupcake topping. Gummi bears jujubes carrot cake shortbread sesame snaps marshmallow danish pudding cotton candy. <strong>Cake jujubes biscuit</strong> topping marzipan sweet roll apple pie bonbon. Bear claw donut bear claw bonbon caramels halvah gummi bears. Gummi bears apple pie jelly-o donut sesame snaps icing marzipan.</p>
<p><strong><em>Bonbon chupa chups</em></strong> donut dessert pudding. Sweet roll caramels dessert muffin croissant. Powder chocolate lollipop ice cream bonbon pie candy muffin cotton candy. Fruitcake topping chupa chups toffee jelly-o halvah. Candy soufflé toffee gummies fruitcake oat cake chocolate cake. Dessert cupcake cheesecake sweet roll bear claw. Marshmallow halvah bear claw biscuit dragée marzipan lemon drops jelly.</p>
</div>
</main>
</body>
</html>
填充内容包含许多用于提供不同字体样式的元素。 <strong> 标签默认将其内容设为粗体，<em> 标签将其内容设为斜体，标题标签将增大字体大小并将其内容加粗。
接下来，返回文本编辑器并在与 index.html 相同的文件夹中创建 styles.css 文件。 这是您在 index.html 的 <head> 元素中引用的文件。 在 styles.css 文件中，添加以下代码：
样式.css
body {
margin: 0;
background-color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 10%);
line-height: 1.5;
}
.content-width {
max-width: 70ch;
width: calc(100% - 4rem);
margin: 0 auto;
}
main {
margin-bottom: 4rem;
}
header {
margin-bottom: 4rem;
padding: 2rem 0;
background-color: hsl(280, 50%, 40%);
border-bottom: 4px solid hsl(300, 50%, 50%);
color: hsl(300, 50%, 90%);
}
header p {
color: hsl(300, 50%, 85%);
}
h1, h2, h3 {
margin: 0;
line-height: 1.25;
}
h2, h3 {
color: hsl(280, 50%, 40%)
}
这些样式创建了页面的整体视觉样式。 header 的底色为紫色，内部的 h1 和 p 为浅紫色。 main 和 .content-width 选择器创建页面布局，body 和标题选择器通过设置 line-height, color 和 margin 值。
将您的更改保存到 styles.css，然后打开您的网络浏览器。 通过将文件拖入浏览器窗口，或使用浏览器的 Open File 选项在浏览器中打开 index.html。 浏览器将渲染 HTML 和 CSS 代码以生成如下图所示的页面：
浏览器中 index.html 文件的文本将使用浏览器的本地默认字体。 在大多数情况下，这将是像 Times New Roman 这样的衬线字体。 自定义字体最有效的方法是使用最终用户计算机上已有的字体。 使用本地字体可以减轻浏览器下载和处理大型文件的负担。
如今，通常有几十种本地字体可供选择； 这些被称为 系统字体 。 Microsoft 和 Apple 都保留了其系统附带的字体的更新列表。
要开始使用预装的系统字体，请在文本编辑器中返回 styles.css。 在 body 选择器中，添加一个 font-family 属性，并将其值设为以逗号分隔的字体列表，称为字体堆栈：
样式.css
body {
margin: 0;
background-color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 10%);
line-height: 1.5;
font-family: "PT Sans", Calibri, Tahoma, sans-serif;
}
...
浏览器会依次尝试加载字体栈中的本地字体，直到加载成功。 对于此字体堆栈，要尝试的第一个字体是 "PT Sans"，因为它是一个多字字体名称，所以它用引号引起来。 PT Sans 是来自 ParaType 的字体，预装在 Apple 操作系统上，也可从 Google Fonts 免费获得。 下一个字体是 Calibri，然后是另一个逗号和 Tahoma。 Calibri 是 Microsoft 的字体，安装在最新版本的 Windows 上，而 Tahoma 是 Microsoft 的另一种字体，已在 Apple 操作系统上使用了十多年。
最终字体是通用名称空间值 sans-serif。 如果前面三种字体都不可用，那么浏览器会使用浏览器默认的sans-serif字体，比如Helvetica或者Arial。
保存对 styles.css 的更改，然后在浏览器中刷新 index.html。 您的操作系统和安装的字体将决定呈现哪种字体以及呈现方式。 下图显示了 PT Sans 在 macOS 上的 Firefox 中加载时如何显示为字体：
字体系列 包含给定字体的所有粗细和样式变化。 系列可以包含许多额外的粗细和样式，以改变字体的细度、粗度和倾斜度。
font-style 属性决定了字体的倾斜度。 该值最常见的是italic； 然而，一些字体支持 oblique 值，它接受一个可选的度值来指示倾斜的陡度。
font-weight 属性有两个已定义的命名值 normal 和 bold，但确定该值的最通用和可预测的方式是使用权重数字。 重量数值通常以 100 为增量从 100 到 900 进行定义，其中 100 为薄重量，而 900 为厚重量。 如果浏览器找不到与指定粗细对应的字体，它将找到最接近的可用大小。
要在整个教程中为此页面设置一些新的基本字体样式，请在文本编辑器中返回 styles.css。 然后为每个 h1、h2、h3 和 p 元素创建一个元素选择器。 在每个选择器中，添加以下代码块中突出显示的 CSS 以增加字体大小并强调标题：
样式.css
...
h2, h3 {
color: hsl(280, 50%, 40%)
}
h1 {
font-size: 3rem;
font-weight: 100;
}
h2 {
font-size: 2rem;
font-weight: 200;
}
h3 {
font-size: 1.75rem;
font-style: italic;
font-weight: 200;
}
p {
font-size: 1.125rem;
}
这里的h1设置为3rem的font-size，相当于48px，用100。 然后，将h2设置为2rem，相当于32px，200的font-weight。 接下来，将 h3 设置为与 h2 相同的 font-weight 和稍小的 font-size，但增加了 font-style 属性设置为 italic。 最后，p 元素选择器将标准的 font-size 提升为 1.125rem，在这种情况下等于 18px。 当您更改每个部分中使用的字体时，对文本整体样式的调整将保持不变。
将更改保存到 styles.css，然后返回浏览器并刷新 index.html。 整体文本大小有所增加，标题样式彼此之间的区别更大。 下图显示了它在浏览器中的显示方式：
在本节中，您使用字体堆栈以排序顺序在页面上加载一系列可能的字体。 您还了解了具有 font-weight 和 font-style 属性的字体系列的可能变化。 在下一部分中，您将使用来自字体托管服务的字体。
从托管服务中查找和加载字体文件
托管字体服务是为网站查找和提供自定义字体的一种流行且有效的方式。 Google Fonts、Adobe Fonts（以前称为 Typekit）和 Typography.com 等服务提供了大量高质量字体库，客户将临时下载这些字体库查看您的页面时。 这意味着您不再需要担心客户端系统上有哪些字体。
每个字体托管服务都有自己的字体加载过程，并且在许多情况下都有相关的成本。 在本节中，您将从 Google 的服务中找到并加载字体，因为它免费托管开源和有限许可字体。
首先，打开 fonts.google.com。 使用页面顶部的搜索栏搜索名为“Open Sans”的字体。 搜索结果将列出匹配的词，这是一个链接，将您带到 Google Fonts Open Sans 页面。 在此页面上，列出了几种字体样式。 这些字体粗细和样式组合中的每一个都是浏览器将下载的唯一字体文件。
注： font-weight和font-style需要根据需要选择，而不是全部选择。 选择更多字体意味着需要下载更多字体，从而增加网站加载时间。 仅加载设计中使用的字体粗细和样式很重要。
对于此设计，请选择 Light 300、Light 300 italic、Regular 400、Regular 400 italic、Bold 700[X134X ] 和 粗体 700 斜体 。 下图显示了此选择在 Google 字体中的外观：
接下来，复制从 Google 字体服务加载文件所需的 <link> 标签。 为此，请选择'选项而不是 @进口'选项作为在 Google 字体界面中加载文件的方式。 复制显示的 <link> 标签系列。 然后，在文本编辑器中返回 index.html。 进入 <head> 元素，在 <link> 标签加载 styles.css 之后，粘贴来自 Google 字体的 <link> 标签。 以下代码块中突出显示的 HTML 演示了在何处添加复制的代码：
索引.html
<!doctype html>
<html>
<head>
...
<link href="styles.css" rel="stylesheet" />
<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=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
...
</body>
</html>
前两个 <link> 元素执行称为 preconnect 的任务，它告诉浏览器优先考虑外部 Web 连接。 反过来，这两个 <link> 元素准备浏览器尽快从第三个 <link> 加载 CSS 文件和字体文件。
现在字体已准备好供浏览器将其加载到页面上，接下来您需要应用字体样式，以便使用该字体呈现文本。
将更改保存到 index.html，然后在文本编辑器中返回到 styles.css。 在 body 选择器中，转到 font-family 属性。 在 "PT Sans" 字体之前用引号将带有字体名称 "Open Sans" 的值添加到引号中，后跟逗号。 以下代码块中突出显示的 CSS 显示了新字体在字体堆栈中的位置：
样式.css
body {
margin: 0;
background-color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 10%);
line-height: 1.5;
font-family: "Open Sans", "PT Sans", Calibri, Tahoma, sans-serif;
}
...
通过将 Open Sans 添加到字体堆栈的开头，如果浏览器无法从 Google 加载文件，浏览器将回退到下一个可用的本地字体。 始终拥有至少两个字体堆栈很重要，堆栈中的最后一个字体是 sans-serif、serif、monospace 或另一个最有效的命名值类似于预期的字体。
将您的更改保存到 styles.css 并在 Web 浏览器中打开 index.html。 页面上的文本现在将使用从 Google 字体加载的 Open Sans 字体呈现。 font-weight 设置为 100 和 200 的文本将改为使用 300，因为这是最接近的可用文本。 下图说明了它在浏览器中的显示方式：
在本节中，您从 Google 字体加载了一个字体系列。 您了解了每种字体粗细和样式是如何从服务加载的不同文件的，并且加载的变体数量会影响站点性能。 在下一节中，您将通过编写自己的 @font-face 规则来加载字体，以填充自托管字体文件。
使用 @font-face 加载自托管字体
自托管字体是与其他 Web 组件（例如 HTML 和 CSS 文件）一起存储在服务器上的字体文件。 考虑自行托管字体文件的一个常见原因是，当您想要使用托管服务未提供的字体时。 自托管时，可以更好地控制字体之间的关系以及它们的命名方式，您可以通过 @font-face 规则的定义进行设置。 在本节中，您将编写自己的 @font-face 规则并将一系列字体加载到您的网页上。
对于本节，您需要下载包含开源字体 的 示例 zip 文件。 您可以通过浏览器下载此文件或使用以下 curl 命令：
curl -sL https://assets.digitalocean.com/articles/68060/fonts.zip -o fonts.zip
下载文件后，解压缩 zip 文件中包含的 fonts 目录，并将其放在计算机上与 index.html 和 styles.css 文件相同的目录中。 在 Linux 上，您可以使用以下 unzip 命令从命令行执行此操作：
unzip fonts.zip
接下来，在文本编辑器中打开 index.html。 由于您将从 zip 文件加载本地字体，因此您可以删除 Google 字体代码。 在本节中，您将从现有的 styles.css 文件加载字体文件。 确保 <head> 元素的内容设置如下代码块：
索引.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>A Demo Font Family Page</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
...
</body>
</html>
将您的编辑保存到 index.html，然后在文本编辑器中打开 styles.css。
您可以使用 @font-face 规则在网页上加载自定义字体。 加载自定义字体的历史导致了一种复合方法来支持最广泛的浏览器。 与其他规则不同，如 @media 或 @supports，@font-face 规则没有额外的参数。 在规则块内，只接受一定数量的属性。 最重要的是 font-family，它描述了浏览器将用来引用和加载相应字体文件的名称。 然后，src 属性引用字体文件的位置。 为了支持版本 9 之前的 Internet Explorer 版本，需要两个 src 属性，第一个仅引用 .eot 字体文件格式。 第二个 src 属性将是一个逗号分隔的字体文件格式列表。 浏览器版本将选择它支持的适当格式。
要开始使用 @font-face 规则，请在文本编辑器中打开 styles.css。 在文件顶部，在 body 选择器之前，创建以下 @font-face 规则：
样式.css
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-Regular.eot');
src: url('fonts/fira/eot/FiraSans-Regular.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-Regular.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-Regular.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-Regular.ttf') format('truetype');
}
body {
...
}
...
在此规则中，您添加了一个 font-family 属性，其值为 "Fira Sans" 引号。 由于此代码定义了一个整体的 font-family，因此只应使用一个字体名称。 src 的字体格式的逗号分隔列表是两部分的。 第一个是 url()，与 background-image 属性类似，它提供服务器上文件格式的路径。 然后，format() 说明引用的文件类型，允许浏览器选择支持的格式。
fonts 文件夹内的 fira 文件夹包含四个具有 Fira Sans 字体特定文件格式的文件夹。 EOT 代表 Encapsulated OpenType，这是 Microsoft 为 Internet Explorer 开发的一种格式，用于加载自定义字体。 TTF 代表 TrueType 字体，是一种较旧的字体格式，最初不是为 Web 开发的。 WOFF 和 WOFF2 格式代表 Web Open Font Format，“2”表示格式的第二个版本。 大多数现代浏览器同样支持 TTF、WOFF 和 WOFF2。 要创建涵盖最可能的浏览器格式的 @font-face 规则，您为字体提供了多个来源。 在两个 src 属性中都引用了 EOT，因为 Internet Explorer 版本 9 和更高版本使用逗号分隔格式。
现在您已经为 Fira Sans 创建了 @font-face 规则，请转到 body 选择器中的 font-family 属性。 在 font-family 的值中，将 "Open Sans" 替换为 "Fira Sans" 以在您的页面上使用自托管字体。 以下代码块的突出显示部分演示了此更改：
样式.css
@font-face {
...
}
body {
margin: 0;
background-color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 10%);
line-height: 1.5;
font-family: "Fira Sans", "PT Sans", Calibri, Tahoma, sans-serif;
}
...
即使字体是从与 styles.css 和 index.html 文件相同的位置加载的，但保留备用字体堆栈也很重要。 自托管字体可能无法加载的原因有很多，如果浏览器遇到问题，足够的备份有助于为您的网站保持类似的美感。
将您的更改保存到 styles.css 并在 Web 浏览器中打开 index.html。 请注意，字体的粗体和斜体版本看起来不太正确。 这是因为在 @font-face 规则中，仅加载和使用了常规字体粗细和样式文件。 当浏览器需要对字体应用粗体或斜体样式，但缺少适当的字体文件时，浏览器会创建所需的变体。 这种更改后的字体形式称为 仿粗体 和 仿斜体 。 人造粗体是通过向字体添加笔画来创建的，这通常会在字符之间产生更宽的间距，这可能会干扰您的预期布局。 仿斜体是通过倾斜字体创建的，它通常不像真正的斜体那样使用空间。
下图显示了仿粗体、斜体和粗斜体样式在浏览器中的显示方式：
为了向浏览器提供字体系列的适当变体，需要在 @font-face 规则中提供更多详细信息，并且您需要创建更多规则来加载额外的变体文件。
在文本编辑器中返回 styles.css。 在 @font-face 规则中，在第二个 src 属性之后添加一个 font-weight 和一个 font-style 属性：
样式.css
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-Regular.eot');
src: url('fonts/fira/eot/FiraSans-Regular.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-Regular.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-Regular.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
...
在这里，您将两个属性的值设置为 normal。 对于 font-weight，normal 值等价于 400 数值权重值。 这些属性告诉浏览器将这些字体文件应用于正常变化。 因此，当文本需要是正常的粗细和样式时，将使用 FiraSans-Regular 字体文件。
接下来，为了提供纠正假粗体和假斜体所需的变体，添加更多 @font-face 规则以引用每个 font-weight 和 font-style 组合：
样式.css
/* Fira Sans Regular */
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-Regular.eot');
src: url('fonts/fira/eot/FiraSans-Regular.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-Regular.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-Regular.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-Italic.eot');
src: url('fonts/fira/eot/FiraSans-Italic.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-Italic.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-Italic.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
/* Fira Sans Bold */
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-Bold.eot');
src: url('fonts/fira/eot/FiraSans-Bold.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-Bold.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-Bold.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-BoldItalic.eot');
src: url('fonts/fira/eot/FiraSans-BoldItalic.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-BoldItalic.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-BoldItalic.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}
...
随着更多变体的添加，添加注释有助于更轻松地识别字体粗细组。 因此，您在第一个 @font-face 规则上方添加了 CSS 注释。 然后，在第一条规则下方，您为字体的斜体、粗体和粗斜体变体创建了另外三个 @font-face 规则。
将这些更新保存到您的 styles.css 文件中，然后在浏览器中刷新 index.html。 您的浏览器现在正在加载所提供字体系列的所有变体。 下图展示了粗体、斜体和粗斜体的仿版和真实版本之间的区别：
真正的粗体比浏览器的仿粗体粗得多，而且文本更靠近，占字体笔画较粗的原因。 在比较单词“Italic”中的小写 a 字符时，真正的斜体更为显着。 字体改变斜体时 a 字符的样式。 此外，真正斜体的倾斜度比浏览器的假斜体要小。
接下来，还有一些字体变体要加载，因为标题元素使用的是 Fira Sans 的较细版本。
在文本编辑器中返回 styles.css 并在常规版本 @font-face 规则之上再创建四个 @font-face 规则：
样式.css
/* Fira Sans Thin */
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-Thin.eot');
src: url('fonts/fira/eot/FiraSans-Thin.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-Thin.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-Thin.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-ThinItalic.eot');
src: url('fonts/fira/eot/FiraSans-ThinItalic.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-ThinItalic.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-ThinItalic.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-ThinItalic.ttf') format('truetype');
font-weight: 100;
font-style: italic;
}
/* Fira Sans Light */
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-Light.eot');
src: url('fonts/fira/eot/FiraSans-Light.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-Light.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-Light.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-Light.ttf') format('truetype');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-LightItalic.eot');
src: url('fonts/fira/eot/FiraSans-LightItalic.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-LightItalic.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-LightItalic.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-LightItalic.ttf') format('truetype');
font-weight: 200;
font-style: italic;
}
...
这些新规则加载 Fira Sans 的 Thin 和 Light 变体，分别映射到 100 和 200 font-weight 值。 由于这些大小没有单词值，因此您将常规和粗体 font-weight 属性的值更改为它们的数值。
将这些更改保存到 styles.css，然后返回浏览器并刷新 index.html。 标题元素现在使用 Fira Sans 的更薄变体，如下图所示：
在本节中，您使用 @font-face 规则加载了自托管字体文件。 您了解了人造粗体和斜体如何影响字体的视觉呈现，以及如何将许多字体文件与一个通用的 font-family 值链接在一起。 在最后一节中，您将使用可变字体，它允许来自单个字体文件的许多变体。
使用可变字体
可变字体是 Web 排版选项中相对较新的补充。 在上一节中，每个字体粗细和样式都必须从一个单独的文件中加载，而可变字体包含一个文件中的信息，可以从中计算出许多变体。 可变字体可以提高性能，并提供比以前更多的设计可能性。 在本节中，您将使用 @font-face 规则加载可变字体并调整字体的显示以找到正确的变体。
要开始使用可变字体，请在文本编辑器中打开 styles.css。 首先，删除上一节中的所有 @font-face 规则，并用以下新规则替换它们：
样式.css
@font-face {
font-family: Raleway;
src: url('fonts/raleway/Raleway.woff2') format('woff2');
font-style: normal;
font-weight: 300 800;
}
body {
...
可变字体在结构上看起来与标准 @font-face 规则相同。 您首先声明一个 font-family 名称，然后提供一个 src 值列表，尽管通常使用可变字体只需要一种格式。 此字体的 font-style 属性设置为 normal。 font-weight 值有所不同。 不是定义单个值，而是用最薄的权重和最厚的权重编写范围。 通过定义这个范围，浏览器可以为可能发生的变化计算做好准备。 此处为 Raleway 设置 font-face 规则，font-weight 范围从 300 到 400。
接下来，您需要在字体堆栈中建立 Raleway。 从字体堆栈的开头删除 "Fira Sans" 并将其替换为 Raleway。 由于名称 Raleway 不包含任何空格，因此不需要用引号引起来：
样式.css
...
body {
margin: 0;
background-color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 10%);
line-height: 1.5;
font-family: Raleway, "PT Sans", Calibri, Tahoma, sans-serif;
}
...
将更改保存到 styles.css 并在 Web 浏览器中打开 index.html。 浏览器生成真正的字体粗细而不是虚假粗细，但由于缺乏定义的斜体样式而无法正确处理斜体。
要设置 Raleway 可变字体的斜体版本，请在文本编辑器中返回 styles.css。 在第一个 @font-face 规则下方，创建一个新规则集：
样式.css
@font-face {
font-family: Raleway;
src: url('fonts/raleway/Raleway.woff2') format('woff2');
font-weight: 300 800;
font-style: normal;
}
@font-face {
font-family: Raleway;
src: url('fonts/raleway/Raleway-Italic.woff2') format('woff2');
font-weight: 300 800;
font-style: italic;
}
body {
...
}
...
src 已将其字体文件名从 Raleway.woff2 更改为 Raleway-Italic.woff2，font-style 值现在为 italic。
将您的更改保存到 styles.css 并在浏览器中刷新页面。 浏览器现在正在渲染 Raleway 各种权重的斜体版本。 下图显示了具有完整 Raleway 可变字体集的页面的更新版本：
使用可变字体的优点是在 font-weight 范围内定义的任何整数值都可用。 虽然标准字体粗细以 100 的值递增，但可变字体粗细可以以低至 1 的值递增。 这提供了一种以以前不可能的方式微调字体视觉设计的方法。
要使用范围内的重量值，请在文本编辑器中返回 styles.css 并进行以下更改：
样式.css
...
h1 {
font-size: 3rem;
font-weight: 350;
}
h2 {
font-size: 2rem;
font-weight: 570;
}
h3 {
font-size: 1.75rem;
font-style: italic;
font-weight: 450;
}
p {
font-size: 1.125rem;
}
strong {
font-weight: 600;
}
对于 h1 选择器，您将 font-weight 值更改为 350。 然后，将 h2 font-weight 属性设置为 570 并将 h3 设置为 450。 最后，您创建了一个 strong 元素选择，其中 font-weight 属性设置为 650。
请务必将更改保存到 styles.css，然后返回浏览器并刷新 index.html。 浏览器现在在整个页面中呈现不同粗细的 Raleway 字体。 下图显示了它在浏览器中的显示方式：
在最后一部分中，您在网页上加载并使用了可变字体。 与十几种标准字体相比，一种或两种可变字体可以产生更多的变化。 您还学习了如何调整可变字体以找到适合您的设计需求的正确变化，其程度与以前不同。
结论
字体是设计视觉美感的关键组成部分。 它们受到高度追捧的资产，可以帮助一个网站从另一个网站中脱颖而出。
在本教程中，您了解了在网站上使用字体的主要方式。 您使用本地字体和字体堆栈来告诉浏览器尝试加载哪些字体。 然后，您使用字体托管服务有效地从 Google Fonts 加载字体 Open Sans。 接下来，您设置自己的一系列 @font-face 规则并创建自己的自托管字体系列。 最后，您基于所学加载自己的字体以使用可变字体并尝试它们提供的多功能性和性能。 请记住，无论字体是本地的、来自托管服务的还是自托管的，始终在字体堆栈中保留备用字体很重要，因为字体可能由于未知原因而无法加载。
如果您想阅读更多 CSS 教程，请尝试 如何使用 CSS 设置 HTML 样式系列 中的其他教程。
