Web 字体

字体系列回顾

正如我们在基础文本和字体样式中所看到的，应用于 HTML 的字体可以使用 font-family 属性进行控制。它接受一个或多个字体系列名称。显示网页时，浏览器将遍历字体系列值列表，直到找到其运行系统上可用的字体。

p {
  font-family: "Helvetica", "Trebuchet MS", "Verdana", sans-serif;
}

这个系统运行良好，但传统上 Web 开发人员的字体选择受到限制。只有少数几种字体可以保证在所有常见系统上都可用——这就是所谓的Web 安全字体。您可以使用字体堆栈来指定首选字体，然后是 Web 安全替代字体，然后是默认系统字体。但是，由于需要进行测试以确保您的设计适用于每种字体，这增加了您的工作量。

Web 字体

有一个运行良好的替代方案。CSS 允许您指定 Web 上可用的字体文件，以便在访问您的网站时与您的网站一起下载。这意味着任何支持此 CSS 功能的浏览器都可以显示您专门选择的字体。太棒了！所需的语法看起来像这样：

首先，您在 CSS 的开头有一个 @font-face 规则集，它指定要下载的字体文件。

@font-face {
  font-family: "myFont";
  src: url("myFont.woff2");
}

在此之下，您可以使用 @font-face 中指定的字体系列名称，像往常一样将自定义字体应用于您喜欢的任何内容。

html {
  font-family: "myFont", "Bitstream Vera Serif", serif;
}

语法会比这更复杂一些。我们将在下面详细介绍。

以下是关于 Web 字体需要牢记的一些重要事项：

1. 字体通常不是免费使用的，并且有使用限制。您必须付费和/或遵守其他许可条件，例如在您的代码（或网站）中注明字体创作者。您不应在未注明出处的情况下窃取和使用字体。
2. 所有主流浏览器都支持 WOFF/WOFF2（Web Open Font Format 版本 1 和 2）。甚至较旧的浏览器（例如 2011 年发布的 IE9）也支持 WOFF 格式。
3. WOFF2 支持 TrueType 和 OpenType 规范的全部内容，包括可变字体、彩色字体和字体集合。
4. 字体文件列表的顺序很重要。如果您向浏览器提供多个要下载的字体文件列表，浏览器将选择它能够使用的第一个字体文件。这就是为什么您首先列出的格式应该是首选格式——即 WOFF2——之后列出较旧的格式。不理解某种格式的浏览器将回退到列表中的下一个格式。
5. 如果需要与旧版浏览器配合使用，您应该提供 EOT（嵌入式 OpenType）、TTF（TrueType 字体）和 SVG Web 字体供下载。本文介绍了如何使用 Fontsquirrel Webfont Generator 生成所需的文件。

您可以使用 Firefox 字体编辑器来检查和操纵页面上使用的字体，无论它们是否是 Web 字体。

添加您自己的 Web 字体

考虑到这一点，我们现在将要求您从头开始构建一个基本的 Web 字体示例。使用嵌入式实时示例很难演示这一点。因此，我们希望您按照以下部分中详细说明的步骤来了解此过程。

您应该使用 web-font-start.html 和 web-font-start.css 文件作为起点来添加您的代码（请参阅实时示例）。现在将这些文件复制到您计算机上的新目录中。在 web-font-start.css 文件中，您会找到一些最小的 CSS 来处理示例的基本布局和排版。

查找字体

对于此示例，我们将使用两种 Web 字体：一种用于标题，一种用于正文。首先，我们需要找到包含这些字体的字体文件。字体由字体铸造厂创建，并以不同的文件格式存储。通常有三种类型的网站可以获取字体：

• 免费字体分发商：此网站提供免费字体下载（可能仍有一些许可条件，例如注明字体创作者）。示例包括 Font Squirrel、DaFont 和 Everything Fonts。
• 付费字体分发商：此网站提供收费字体，例如 fonts.com 或 myfonts.com。您也可以直接从字体铸造厂购买字体，例如 Linotype、Monotype 或 Exljbris。
• 在线字体服务：此网站为您存储和提供字体，使整个过程更简单。有关更多详细信息，请参阅使用在线字体服务部分。

让我们找一些字体！前往 Font Squirrel 并选择两种字体：一种用于标题的漂亮有趣的字体（也许是一种漂亮的显示字体或衬线字体），以及一种用于段落的略微不那么华丽且更易读的字体。找到字体后，点击下载按钮并将文件保存到您之前保存的 HTML 和 CSS 文件所在的同一目录中。它们是 TTF（True Type 字体）还是 OTF（Open Type 字体）都无关紧要。

解压这两个字体包（Web 字体通常以 ZIP 文件形式分发，其中包含字体文件和许可信息）。您可能会在包中找到多个字体文件——有些字体以系列形式分发，提供不同的变体，例如细体、中等、粗体、斜体、细斜体等。对于此示例，我们只需要您关注每种选择的一个字体文件。

生成所需代码

现在您需要生成所需的代码（和字体格式）。对于每种字体，请按照以下步骤操作：

1. 如果您打算在商业和/或 Web 项目中使用此字体，请确保您已满足任何许可要求。
2. 转到 Transfonter Webfont Generator。
3. 使用添加字体按钮上传您的两个字体文件。
4. 点击转换。
5. 点击下载。

ZIP 文件下载完成后。解压并将其移动到您的 HTML 和 CSS 文件所在的同一目录中。

在您的演示中实现代码

在解压后的目录中，您会看到一些有用的项目：

• 每种字体的两个版本：.woff 和 .woff2 文件。
• 每种字体的演示 HTML 文件 — 在浏览器中加载它们，查看字体在不同使用上下文中的外观。
• 一个 stylesheet.css 文件，其中包含您需要的生成的 @font-face 代码。

要在您的演示中实现这些字体，请按照以下步骤操作：

1. 将解压后的目录重命名为简单易懂的名称，例如 fonts。

2. 打开 stylesheet.css 文件，并将两个 @font-face 规则集复制到您的 web-font-start.css 文件中——您需要将它们放在最顶部，在任何 CSS 之前，因为字体需要在您可以在您的站点上使用它们之前导入。

3. 每个 url() 函数都指向我们想要导入到 CSS 中的字体文件。我们需要确保文件路径正确，因此在每个路径的开头添加 fonts/（根据需要进行调整）。

4. 现在您可以在字体堆栈中使用这些字体，就像任何 Web 安全字体或默认系统字体一样。例如：

   css

   @font-face {
     font-family: "zantrokeregular";
     src:
       url("fonts/zantroke-webfont.woff2") format("woff2"),
       url("fonts/zantroke-webfont.woff") format("woff");
     font-weight: normal;
     font-style: normal;
     font-display: swap;
   }
   

   css

   font-family: "zantrokeregular", serif;
   

您最终应该得到一个已实现一些漂亮字体的演示页面。由于不同的字体以不同的尺寸创建，您可能需要调整尺寸、间距等，以整理外观。

使用在线字体服务

在线字体服务通常为您存储和提供字体，这样您就不必担心编写 @font-face 代码。相反，您通常只需在您的网站中插入一两行简单的代码即可使一切正常运行。示例包括 Adobe Fonts 和 Cloud.typography。这些服务大多是订阅制的，值得注意的是 Google Fonts 除外，它是一个有用的免费服务，尤其适用于快速测试工作和编写演示。

这些服务大多易于使用，因此我们不会详细介绍。让我们快速了解一下 Google Fonts，以便您了解其理念。再次，使用 web-font-start.html 和 web-font-start.css 的副本作为您的起点。

1. 前往 Google Fonts。
2. 搜索您喜欢的字体或使用页面顶部的过滤器显示您想要选择的字体类型并选择您喜欢的几种字体。
3. 要选择字体系列，请单击字体预览，然后按字体旁边的 ⊕ 按钮。
4. 选择字体系列后，点击页面右上角的查看您选择的系列按钮。
5. 在出现的屏幕中，您首先需要复制显示的 HTML 代码行并将其粘贴到 HTML 文件的头部。将其放在现有 <link> 元素上方，以便在您尝试在 CSS 中使用字体之前导入字体。
6. 然后，您需要将列出的 CSS 声明适当地复制到您的 CSS 中，以将自定义字体应用于您的 HTML。

@font-face 详情

让我们探索 Transfonter 为您生成的 @font-face 语法。规则集看起来像这样：

@font-face {
  font-family: "zantrokeregular";
  src:
    url("zantroke-webfont.woff2") format("woff2"),
    url("zantroke-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

让我们逐一分析，看看它做了什么：

• font-family：此行指定您希望引用该字体的名称。您可以随意命名，只要在整个 CSS 中保持一致即可。
• src：这些行指定要导入到 CSS 中的字体文件的路径（url 部分）以及每个字体文件的格式（format 部分）。后一部分在每种情况下都是可选的，但声明它很有用，因为它允许浏览器更快地确定它们可以使用哪种字体。可以列出多个声明，用逗号分隔。由于浏览器将根据级联规则搜索它们，因此最好将您首选的格式（如 WOFF2）放在开头。
• font-weight/font-style：这些行指定字体的粗细以及是否为斜体。如果您导入同一种字体的多种粗细，您可以指定它们的粗细/样式，然后使用不同的 font-weight/font-style 值来选择它们，而无需为字体系列的所有不同成员调用不同的名称。@font-face tip: define font-weight and font-style to keep your CSS simple by Roger Johansson 更详细地展示了该怎么做。
• font-display：此行指定字体在加载时的显示方式。

总结

既然您已经完成了我们关于文本样式基础知识的文章，现在是时候通过我们的模块挑战来测试您的理解了：排版一个社区学校主页。

另见

• 可变字体指南
• 字体知识，Google Fonts

• 上一页
• 概述：CSS 文本样式
• 下一页