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

笔记首页 >> 教程系列 >> 如何使用 @font-face 和 font-display 在 CSS 中定义自定义字体

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

介绍

@font-face是用于定义自定义字体的CSS 规则。使用@font-face，您可以提供与 CSS 文件位于同一服务器上的字体文件的路径。该规则已经存在一段时间了，但是有一个更新的属性font-display，它带来了一个新的加载选项级别。

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

先决条件

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

步骤 1 — 下载字体并构建网页

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

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

mkdir -p ./website/fonts/

导航到我们新项目的根目录，website：

cd website

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

现在我们将使用该curl命令下载 Roboto Mono 字体。我们正在使用一个名为的流行应用程序google-webfonts-helper，该应用程序允许我们通过单个整齐捆绑的GET请求直接从 Google 的内容交付网络下载多种字体。

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

curl -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"

请注意我们如何variants从 Roboto Mono 字体系列中指定我们想要的。然后formats我们为每个指定我们想要的。我们要求的ttf，woff和woff2格式。该woff2格式是最现代的Web字体格式，但支持woff2仍然在一些浏览器缺乏。因此，我们还提供了一种后备woff格式，支持回到 Internet Explorer 9 和TrueType 格式，或ttf. 这将为我们提供出色的覆盖范围，但是当我们编写 CSS 时，我们将使用标准字体提供更多后备选项。该font-display属性还将帮助我们管理如何为不同用户加载字体。

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

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

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

ls ./fonts

我们现在找到了六个新文件——a .ttf、a.woff和.woff2每个字体的文件。

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

第 2 步 – 使用`@font-face`规则

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

使用nano或您喜欢的文本编辑器，创建并打开一个名为的文件style.css：

nano style.css

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

样式文件

@font-face {
  font-family: 'Roboto Mono', monospace;
  src: url(fonts/roboto-mono-v12-latin-regular.woff2) format('woff2'),
       url(fonts/roboto-mono-v12-latin-regular.woff) format('woff'),
       url(fonts/roboto-mono-v12-latin-regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Roboto Mono', monospace;
  src: url(fonts/roboto-mono-v12-latin-700italic.woff2) format('woff2'),
       url(fonts/roboto-mono-v12-latin-700italic.woff) format('woff'),
       url(fonts/roboto-mono-v12-latin-700italic.ttf) format('truetype');
  font-weight: 700;
  font-style: italic;
}

h1, p {
  font-family: 'Roboto Mono', monospace;
}

h1 {
  font-family: 'Roboto Mono', monospace;
  font-weight: 700;
  font-style: italic;
}

让我们逐块检查这段代码。

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

在我们的第二个块中，我们提供相同的font-family值，但我们使用到我们700italic的 Roboto Mono 版本的路径。然后我们定义两个属性，font-weight和font-style。我们将使用这些属性来定义我们想要在何处使用 Roboto Mono 的第二个版本。

在接下来的两个块中，我们将为<h1>和<p>元素定义自定义样式。请注意我们如何使用font-family来定义两者，然后将font-weight和添加font-style到特定于的块<h1>。这将H1在 Roboto Mono700italic而非 Roboto Mono 中呈现我们的标题regular。

保存并关闭文件。

现在让我们用一些<h1>和<p>标签构建一个小的 HTML 页面。

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

nano index.html

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

索引.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS @font-face</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1> Roboto Mono font, 700italic </h1>
  <p> Roboto Mono font, regular </p>
</body>
</html>

保存并关闭文件。

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

Roboto Mono 字体，常规

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

步骤 3 —`font-display`用于控制字体加载

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

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

处理 FOUT 的一种方法是使用Font Style Matcher 之类的工具来查找尽可能接近自定义字体的后备字体，这样字体更改就不会感觉如此剧烈。但是，我们可以使用该font-display属性更优雅地处理这些问题。

要解决加载问题，请font-display采用 5 个值之一：

auto：这使用浏览器的默认行为，这会有所不同。
block：文本首先隐藏一小段时间，但在可用时将更改为自定义字体。这一个值是说有一个无限的swap时期。
swap：文本永远不会隐藏，并在可用时更改为自定义字体。这也提供了无限的交换期。
fallback：文本隐藏很短的时间（块期），然后有一个短的交换期。如果自定义字体未在交换期内加载，则根本不会加载。
optional：文本有一个非常短的块加载时间（~100 毫秒）。如果在该块期间未加载字体，则使用后备字体并且根本不加载自定义字体。但是，字体仍在后台下载和缓存。这意味着，在后续页面加载时，自定义字体将在缓存中可用，然后将立即加载。

的optional值为font-display许多字体加载情况提供了强大的解决方案。让我们将它添加到我们自己的 CSS 中。

重新开放style.css：

nano style.css

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

样式文件

@font-face {
  font-family: 'Roboto Mono', monospace;
  src: url(fonts/roboto-mono-v12-latin-regular.woff2) format('woff2'),
       url(fonts/roboto-mono-v12-latin-regular.woff) format('woff'),
       url(fonts/roboto-mono-v12-latin-regular.ttf) format('truetype');
  font-display: optional;
}

@font-face {
  font-family: 'Roboto Mono', monospace;
  src: url(fonts/roboto-mono-v12-latin-700italic.woff2) format('woff2'),
       url(fonts/roboto-mono-v12-latin-700italic.woff) format('woff'),
       url(fonts/roboto-mono-v12-latin-700italic.ttf) format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: optional;
}

h1, p {
  font-family: 'Roboto Mono', monospace;
}

h1 {
  font-family: 'Roboto Mono', monospace;
  font-weight: 700;
  font-style: italic;
}

现在我们的自定义字体要么加载得如此之快，以至于用户永远不会遇到 FOUT 或 FOIT，要么根本不会加载。但是，它仍然会在刷新或访问更多页面时立即下载和加载。

结论

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

觉得文章有用？

点个广告表达一下你的爱意吧！