网页字体

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

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

这个系统运行良好，但传统上网页开发人员的字体选择是有限的。只有少数字体可以保证在所有常见系统上可用，即所谓的 网页安全字体。你可以使用字体栈指定首选字体，然后是网页安全字体，最后是默认系统字体。但是，这会增加你的工作量，因为需要进行测试以确保你的设计在每种字体下都能正常工作。

但是有一个非常有效的替代方法。CSS 允许你指定可从网页下载的字体文件，这些字体文件会随着你的网站一起下载。这意味着任何支持此 CSS 功能的浏览器都可以显示你选择的字体。太棒了！所需的语法如下所示

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

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

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

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

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

以下是一些关于网页字体的注意事项：

1. 字体通常不是免费使用的。你需要付费或遵守其他许可条件，例如在你的代码（或你的网站上）中注明字体创建者的署名。你不应该盗用字体并在未经适当署名的情况下使用它们。
2. 所有主流浏览器都支持 WOFF/WOFF2（Web 开放字体格式版本 1 和 2）。即使是 IE9（于 2011 年发布）等旧版浏览器也支持 WOFF 格式。
3. WOFF2 支持 TrueType 和 OpenType 规范的全部内容，包括可变字体、色度字体和字体集合。
4. 列出字体文件的顺序很重要。如果你为浏览器提供多个要下载的字体文件，浏览器将选择它能够使用的第一个字体文件。这就是为什么你首先列出的格式应该是首选格式，即 WOFF2，然后是较旧的格式。不支持一种格式的浏览器将回退到列表中的下一种格式。
5. 如果你需要处理旧版浏览器，则应提供 EOT（嵌入式 OpenType）、TTF（TrueType 字体）和 SVG 网页字体以供下载。本文介绍了如何使用 Fontsquirrel 网页字体生成器生成所需的文件。

你可以使用 Firefox 字体编辑器 来调查和操作页面上使用的字体，无论是网页字体还是其他字体。此视频提供了一个很好的逐步说明。

考虑到这一点，让我们从基本原理开始构建一个基本的网页字体示例。使用嵌入式实时示例很难演示这一点。因此，我们希望您按照以下各节中详细介绍的步骤来了解这个过程。

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

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

• 免费字体分发商：这是一个提供免费字体下载的网站（可能仍然有一些许可条件，例如为字体创建者提供署名）。例如 Font Squirrel、dafont 和 Everything Fonts。
• 付费字体分发商：这是一个收费提供字体的网站，例如 fonts.com 或 myfonts.com。您也可以直接从字体铸造厂购买字体，例如 Linotype、Monotype 或 Exljbris。
• 在线字体服务：这是一个为您存储和提供字体的网站，使整个过程更加轻松。有关更多详细信息，请参阅 使用在线字体服务 部分。

让我们找到一些字体！访问 Font Squirrel 并选择两种字体：一种有趣的标题字体（可能是一个漂亮的显示字体或衬线字体），以及一种不太花哨且更易读的段落字体。找到字体后，按下下载按钮并将文件保存到与您之前保存的 HTML 和 CSS 文件相同的目录中。它们是 TTF（True Type Fonts）还是 OTF（Open Type Fonts）并不重要。

解压缩这两个字体包（网页字体通常以 ZIP 文件的形式分发，其中包含字体文件和许可信息）。您可能会在包中找到多个字体文件 - 一些字体作为具有不同变体的系列分发，例如细体、中等、粗体、斜体、细斜体等。在这个示例中，我们只希望您关注每个选择的单个字体文件。

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

1. 如果您要在商业和/或 Web 项目中使用它，请确保您已满足任何许可要求。
2. 访问 Fontsquirrel 的 Webfont Generator。
3. 使用“上传字体”按钮上传您的两个字体文件。
4. 选中“是的，我上传的字体在法律上符合网页嵌入资格”复选框。
5. 点击“下载您的工具包”。

生成器处理完成后，您应该会得到一个 ZIP 文件供下载。将其保存到与您的 HTML 和 CSS 相同的目录中。

如果您需要支持旧浏览器，请在 Fontsquirrel Webfont Generator 中选择“专家”模式，在下载您的工具包之前选择 SVG、EOT 和 TTF 格式。

字体生成网页服务通常限制文件大小。在这种情况下，请考虑使用以下工具

1. sfnt2woff-zopfli 用于将 ttf 转换为 woff
2. fontforge 用于将 ttf 转换为 svg
3. batik ttf2svg 用于将 ttf 转换为 svg
4. woff2 用于将 ttf 转换为 woff2

此时，解压缩您刚刚生成的网页字体工具包。在解压缩的目录中，您会看到一些有用的项目

• 每种字体的两个版本：.woff、.woff2 文件。
• 每个字体的演示 HTML 文件 - 在浏览器中加载这些文件以查看字体在不同使用环境中的显示效果。
• 一个 stylesheet.css 文件，其中包含您需要的生成的 @font-face 代码。

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

1. 将解压缩的目录重命名为一个简单易懂的名称，例如 fonts。
2. 打开 stylesheet.css 文件并将两个 @font-face 规则集复制到您的 web-font-start.css 文件中 - 您需要将它们放在最顶部，位于任何 CSS 之前，因为字体需要在您可以在网站上使用它们之前导入。
3. 每个 url() 函数都指向我们想要导入 CSS 的字体文件。我们需要确保文件路径是正确的，因此在每个路径的开头添加 fonts/（根据需要调整）。
4. 现在您可以在您的字体栈中使用这些字体，就像任何网页安全字体或默认系统字体一样。例如
   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;
   }
   

   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。

让我们探索 Fontsquirrel 为您生成的 @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-family：这行指定您要用来引用字体的名称。只要您在整个 CSS 中始终如一地使用它，它可以是您喜欢的任何名称。
• src：这些行指定要导入 CSS 的字体文件的路径（url 部分）和每个字体文件的格式（format 部分）。每个情况下的后半部分是可选的，但声明它是很有用的，因为它允许浏览器更快地确定它们可以使用哪个字体。可以列出多个声明，用逗号分隔。由于浏览器会根据级联规则在其中搜索，因此最好将首选格式（如 WOFF2）放在开头。
• font-weight/font-style：这些行指定字体的粗细和是否为斜体。如果您要导入同一字体的多个粗细，您可以指定它们的粗细/样式，然后使用 font-weight/font-style 的不同值在它们之间进行选择，而不是必须为字体系列的所有不同成员赋予不同的名称。@font-face 技巧：定义 font-weight 和 font-style 以使您的 CSS 更简洁，由 Roger Johansson 详细介绍了该怎么做。

浏览器中有一种较新的字体技术，称为可变字体。这些字体允许将字体的许多不同变体合并到一个文件中，而不是为每种宽度、粗细或样式创建一个单独的字体文件。它们对于我们的初学者课程来说有点先进，但如果您想挑战自己并研究它们，请阅读我们的 可变字体指南。

既然您已经完成了我们关于文本样式基础知识的文章，现在是时候用我们为该模块提供的评估来测试您的理解了：排版社区学校主页。

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