简介

@fonts](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face).-face是用来定义自定义字体的[css at规则使用@font-face，您可以提供指向托管在与您的css文件相同的服务器上的字体文件的路径。这条规则已经存在了很长一段时间，但有一个更新的属性font-display，它带来了一个新级别的加载选项。

在本教程中，我们将下载流行的开源字体Roboto Mono，，并使用@Font-Face将该字体加载到示例网页上。为了创造最佳的用户体验，我们将使用font-display属性来自定义加载它的方式和时间。

前提条件

您选择的代码编辑器，如Nan或Visual Studio代码
网络浏览器
熟悉HTML基础知识。您可以查看我们的系列教程如何使用HTML构建网站》作为介绍。

第一步&mdash；下载字体并构建网页

在我们开始研究@font-face规则之前，让我们先设置一个示例网页和目录。

从工作目录中，为我们的网站创建一个新文件夹，并为我们的字体文件创建一个子目录：

1mkdir -p ./website/fonts/

导航到新项目的根目录website：

1cd website

我们将从这里运行所有剩余的命令。

现在我们将使用curl命令下载Roboto Mono字体。我们正在使用一款名为google-webfonts-helper](http://google-webfonts-helper.herokuapp.com/fonts/roboto-mono?subsets=latin)，的流行应用程序，它允许我们直接从谷歌的内容分发网络下载多种字体在一个整齐捆绑的GETrequest.中

让我们下载两种不同风格和重量的Roboto Mono，Regular和700italic：

1curl -o ./fonts/fontfiles.zip "https://google-webfonts-helper.herokuapp.com/api/fonts/roboto-mono?download=zip&subsets=latin,latin-ext&variants=regular,700italic&formats=woff,woff2,ttf"

注意我们是如何从Roboto Mono字体家族中指定我们想要的‘变体’的。然后我们为每个文件指定我们想要的格式‘。我们正在请求ttf、woff和woff2格式。woff2格式是最现代的网页字体格式，但[某些浏览器仍然缺乏对woff2的支持](http://caniuse.com/#feat=woff2).因此，我们还提供了[Fallback inwoffFormat，有支持](http://caniuse.com/ feat=woff)Back to Internet Explorer9，和[a TrueType Format，orttf](https://caniuse.com/?search=ttf).这将为我们提供很好的覆盖范围，但在编写我们的css时，我们将使用标准字体提供更多后备选项。font-display`属性还将帮助我们管理如何为不同的用户加载字体。

现在将下载的内容解压到我们的./fonts文件夹。在运行Linux和MacOS的计算机上，使用以下命令：

1unzip ./fonts/fontfiles.zip -d ./fonts

检查./fonts文件夹的内容：

1ls ./fonts

我们现在发现六个新文件&mdash；一个.ttf、一个.woff和一个.woff2文件。

下载我们的字体后，让我们编写一些CSS并使用它来设计一个HTML元素的样式。

步骤二&mdash；使用`@font-face`规则

在这一步中，我们将使用@font-face属性应用我们下载的字体。

使用nan或您首选的文本编辑器，创建并打开一个名为yle le.css的文件：

1nano style.css

添加以下内容，它将定义@font-face规则，其中包含我们的文件的路径：

 1[label style.css]
 2@font-face {
 3  font-family: 'Roboto Mono', monospace;
 4  src: url(fonts/roboto-mono-v12-latin-regular.woff2) format('woff2'),
 5       url(fonts/roboto-mono-v12-latin-regular.woff) format('woff'),
 6       url(fonts/roboto-mono-v12-latin-regular.ttf) format('truetype');
 7}
 8
 9@font-face {
10  font-family: 'Roboto Mono', monospace;
11  src: url(fonts/roboto-mono-v12-latin-700italic.woff2) format('woff2'),
12       url(fonts/roboto-mono-v12-latin-700italic.woff) format('woff'),
13       url(fonts/roboto-mono-v12-latin-700italic.ttf) format('truetype');
14  font-weight: 700;
15  font-style: italic;
16}
17
18h1, p {
19  font-family: 'Roboto Mono', monospace;
20}
21
22h1 {
23  font-family: 'Roboto Mono', monospace;
24  font-weight: 700;
25  font-style: italic;
26}

让我们一块一块地检查这段代码。

总是首先在你的主css文件中定义你的@font-faceat-rules。@font-face规则的最基本版本需要font-Family和src属性。在我们的第一个块中，我们提供了Roboto Mono作为Font-Famy的值，我们为src提供了三个文件的路径，每个文件都有不同的格式，并按优先级降序排列。

在我们的第二个块中，我们提供了相同的Font-Family‘值，但是我们使用了指向Roboto Mono的700italic版本的路径。然后我们定义了两个属性，Font-Weight和Font-Style`。我们将使用这些属性来定义我们希望在哪里使用第二个版本的Roboto Mono。

在接下来的两个块中，我们将为<h1>和<p>元素定义自定义样式。请注意，我们如何使用字体系列来定义这两个元素，然后将字体权重和字体样式添加到特定于<h1>的块中。这将使我们的H1标题以Roboto Mono700斜体而不是Roboto Mono常规显示。

保存并关闭该文件。

现在，我们来构建一个带有<h1>和<p>标签的小HTML页面。

创建并打开一个名为index.html的新文件：

1nano index.html

添加以下代码，它将定义一个标题和一行文本：

 1[label index.html]
 2<!DOCTYPE html>
 3<html lang="en">
 4<head>
 5  <meta charset="UTF-8">
 6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7  <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8  <title>CSS @font-face</title>
 9  <link rel="stylesheet" href="style.css">
10</head>
11<body>
12  <h1> Roboto Mono font, 700italic </h1>
13  <p> Roboto Mono font, regular </p>
14</body>
15</html>

保存并关闭该文件。

在Web浏览器中加载index.html。您将看到您的标题以Roboto Mono700斜体呈现，而您的段落文本以Roboto Mono规则呈现，如下所示：

Roboto Mono font, regular

在我们的@font-face属性工作后，现在让我们使用font-display来配置字体加载的方式和时间。

第三步&mdash；使用`font-display`控制字体加载

使用font-display，我们可以精确地控制我们想要加载字体的方式。这可以极大地改善使用自定义字体时的用户体验。

有时，在使用自定义字体时，首次加载页面时，用户可能会遇到Fout(闪烁的未设置样式的文本)或Foit(闪烁的不可见文本)。一些浏览器选择立即显示我们的文本，即使没有加载自定义字体。一旦完全加载，浏览器将恢复为自定义字体，但这会创建一个fout。其他浏览器将短时间隐藏文本，直到加载自定义字体，从而导致Foit。如果在时间窗口期间未加载字体，浏览器将使用备用字体。

处理Fout的一种方法是使用像Font Style Matcher]这样的工具来查找尽可能接近自定义字体的备用字体，这样字体更改就不会感觉那么剧烈。然而，我们可以使用font-display属性来更优雅地处理这些问题。

为了应对加载问题，font-display采用以下5个值之一：

auto：使用浏览器的默认行为，具体情况会有所不同。
块：文本先是短时间隐藏，可用后会改为自定义字体。这一个值被认为具有无限的‘交换’period.
swap：文本永远不会隐藏，当自定义字体可用时会更改为自定义字体。这还规定了无限的互换期限。
回退：文本被隐藏的时间非常短(块时间段)，然后有一个很短的掉期。如果在交换期内没有加载自定义字体，则根本不会加载。
optional：文本被给予非常短的块加载时间(~100ms)。如果在该块期间未加载字体，则使用备用字体，并且根本不加载自定义字体。但是，该字体仍在后台下载和缓存。这意味着，在随后的页面加载中，自定义字体将在缓存中可用，然后立即加载。

font-display的optional值为多种字体加载情况提供了健壮的解决方案。让我们将其添加到我们自己的css中。

重新打开style.css：

1nano style.css

现在添加突出显示的代码：

 1[label style.css]
 2@font-face {
 3  font-family: 'Roboto Mono', monospace;
 4  src: url(fonts/roboto-mono-v12-latin-regular.woff2) format('woff2'),
 5       url(fonts/roboto-mono-v12-latin-regular.woff) format('woff'),
 6       url(fonts/roboto-mono-v12-latin-regular.ttf) format('truetype');
 7  font-display: optional;
 8}
 9
10@font-face {
11  font-family: 'Roboto Mono', monospace;
12  src: url(fonts/roboto-mono-v12-latin-700italic.woff2) format('woff2'),
13       url(fonts/roboto-mono-v12-latin-700italic.woff) format('woff'),
14       url(fonts/roboto-mono-v12-latin-700italic.ttf) format('truetype');
15  font-weight: 700;
16  font-style: italic;
17  font-display: optional;
18}
19
20h1, p {
21  font-family: 'Roboto Mono', monospace;
22}
23
24h1 {
25  font-family: 'Roboto Mono', monospace;
26  font-weight: 700;
27  font-style: italic;
28}

现在，我们的定制字体要么加载得太快，用户永远不会体验到Fout或Foit，要么根本不会加载。然而，它仍然会在刷新或访问更多页面时立即下载和加载。

结论

在本教程中，我们下载了一个自定义字体，并使用@font-face属性将其添加到网页。然后，我们使用font-display属性来管理如何加载自定义字体（如果有的话)。要了解有关font-display和相关属性的更多信息，请考虑浏览Mozilla开发者网络上的相关文档。

如何使用 @font-face 和 font-display 在 CSS 中定义自定义字体

简介

前提条件

第一步&mdash；下载字体并构建网页

步骤二&mdash；使用`@font-face`规则

Roboto Mono font, 700 italic

第三步&mdash；使用`font-display`控制字体加载

结论

如何使用 @font-face 和 font-display 在 CSS 中定义自定义字体

简介

前提条件

第一步&mdash；下载字体并构建网页

步骤二&mdash；使用@font-face规则

Roboto Mono font, 700 italic

第三步&mdash；使用font-display控制字体加载

结论

步骤二&mdash；使用`@font-face`规则

第三步&mdash；使用`font-display`控制字体加载