网页字体

¥Font families recap

正如我们在 基本文本和字体样式 中看到的，应用于 HTML 的字体可以使用 font-family 属性进行控制。这需要一个或多个字体家族名称。显示网页时，浏览器将沿着字体系列值列表向下移动，直到找到运行它的系统上可用的字体：

¥As we looked at in Fundamental text and font styling, the fonts applied to your HTML can be controlled using the font-family property. This takes one or more font family names. When displaying a webpage, a browser will travel down a list of font-family values until it finds a font available on the system it is running on:

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

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

¥This system works well, but traditionally web developers' font choices were limited. There are only a handful of fonts that you can guarantee to be available across all common systems — the so-called Web-safe fonts. You can use the font stack to specify preferred fonts, followed by web-safe alternatives, followed by the default system font. However, this increases your workload because of the testing required to make sure that your designs work with each font.

¥Web fonts

但还有一种效果很好的替代方案。CSS 允许你指定网络上可用的字体文件，在访问你的网站时将其与网站一起下载。这意味着任何支持此 CSS 功能的浏览器都可以显示你专门选择的字体。惊人的！所需的语法如下所示：

¥But there is an alternative that works very well. CSS allows you to specify font files, available on the web, to be downloaded along with your website as it's accessed. This means that any browser supporting this CSS feature can display the fonts you've specifically chosen. Amazing! The syntax required looks something like this:

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

¥First of all, you have a @font-face ruleset at the start of the CSS, which specifies the font file(s) to download:

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

在此下面，你可以像平常一样使用 @font-face 中指定的字体系列名称将自定义字体应用到你喜欢的任何内容：

¥Below this you use the font family name specified inside @font-face to apply your custom font to anything you like, as normal:

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

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

¥The syntax does get a bit more complex than this. We'll go into more detail below.

以下是有关网络字体需要记住的一些重要事项：

¥Here are some important things to bear in mind about web fonts:

1. 字体通常不是免费使用的。你必须为它们付费和/或遵循其他许可条件，例如在你的代码（或你的网站）中注明字体创建者。你不应该窃取字体并在没有给予适当的认可的情况下使用它们。
2. 所有主要浏览器都支持 WOFF/WOFF2（Web 开放字体格式版本 1 和 2）。即使是较旧的浏览器，如 IE9（2011 年发布）也支持 WOFF 格式。
3. WOFF2 支持整个 TrueType 和 OpenType 规范，包括可变字体、彩色字体和字体集合。
4. 列出字体文件的顺序很重要。如果你向浏览器提供要下载的多个字体文件的列表，浏览器将选择它能够使用的第一个字体文件。这就是为什么你首先列出的格式应该是首选格式（即 WOFF2），然后列出较旧的格式。不理解一种格式的浏览器将回退到列表中的下一种格式。
5. 如果你需要使用旧版浏览器，则应提供 EOT（Embedded Open Type）、TTF（TrueType Font）和 SVG Web 字体供下载。本文介绍如何使用 Fontsquirrel Webfont Generator 生成所需的文件。

你可以使用 火狐字体编辑器 来调查和操作页面上使用的字体，无论它们是否是网络字体。该视频提供了一个很好的演练：

¥You can use the Firefox Font Editor to investigate and manipulate the fonts in use on your page, whether they are web fonts or not. This video provides a nice walkthrough:

¥Active learning: A web font example

考虑到这一点，让我们从首要原则构建一个基本的网络字体示例。使用嵌入式实例来演示这一点很困难。因此，我们希望你按照以下部分中详细介绍的步骤来了解该过程。

¥With this in mind, let's build up a basic web font example from first principles. It's difficult to demonstrate this using an embedded live example. So instead we would like you to follow the steps detailed in the below sections to get an idea of the process.

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

¥You should use the web-font-start.html and web-font-start.css files as a starting point to add your code to (see the live example). Make a copy of these files in a new directory on your computer now. In the web-font-start.css file, you'll find some minimal CSS to deal with the basic layout and typesetting of the example.

¥Finding fonts

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

¥For this example, we'll use two web fonts: one for the headings and one for the body text. To start with, we need to find the font files that contain the fonts. Fonts are created by font foundries and are stored in different file formats. There are generally three types of sites where you can obtain fonts:

• 免费字体分发器：这是一个提供免费字体可供下载的网站（可能仍然有一些许可条件，例如注明字体创建者）。示例包括 松鼠字体、dafont 和 一切字体。
• 付费字体经销商：这是一个提供收费字体的网站，例如 fonts.com 或 myfonts.com。你还可以直接从字体铸造厂购买字体，例如 排字机、蒙诺版 或 埃克斯利布里斯。
• 在线字体服务：这是一个为你存储和提供字体的网站，使整个过程变得更加容易。有关详细信息，请参阅 使用在线字体服务 部分。

我们来找一些字体吧！转到 松鼠字体 并选择两种字体：标题的漂亮有趣的字体（可能是漂亮的显示字体或平板衬线字体），以及段落的稍微不那么华丽且更易读的字体。找到字体后，按下载按钮并将文件保存在与之前保存的 HTML 和 CSS 文件相同的目录中。它们是 TTF（True Type Fonts）还是 OTF（Open Type Fonts）并不重要。

¥Let's find some fonts! Go to Font Squirrel and choose two fonts: a nice interesting font for the headings (maybe a nice display or slab serif font), and a slightly less flashy and more readable font for the paragraphs. When you've found a font, press the download button and save the file inside the same directory as the HTML and CSS files you saved earlier. It doesn't matter whether they are TTF (True Type Fonts) or OTF (Open Type Fonts).

解压缩两个字体包（Web 字体通常以包含字体文件和许可信息的 ZIP 文件形式分发）。你可能会在包中找到多个字体文件 - 某些字体作为一个系列分发，具有不同的可用变体，例如细、中、粗、斜体、细斜体等。对于此示例，我们只想让你关注 每个选择都有一个字体文件。

¥Unzip the two font packages (Web fonts are usually distributed in ZIP files containing the font file(s) and licensing information). You may find multiple font files in the package — some fonts are distributed as a family with different variants available, for example thin, medium, bold, italic, thin italic, etc. For this example, we just want you to concern yourself with a single font file for each choice.

注意：在 Font Squirrel 中，在右栏的 "查找字体" 部分下，你可以单击不同的标签和分类来过滤显示的选项。

¥Note: In Font Squirrel, under the "Find fonts" section in the right-hand column, you can click on the different tags and classifications to filter the displayed choices.

¥Generating the required code

现在你需要生成所需的代码（和字体格式）。对于每种字体，请执行以下步骤：

¥Now you'll need to generate the required code (and font formats). For each font, follow these steps:

1. 如果你打算在商业和/或 Web 项目中使用它，请确保你满足任何许可要求。
2. 前往 Fontsquirrel 网页字体生成器。
3. 使用“上传字体”按钮上传两个字体文件。
4. 选中标记为 "是的，我上传的字体在法律上符合网络嵌入的资格。" 的复选框
5. 单击下载你的套件。

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

¥After the generator has finished processing, you should get a ZIP file to download. Save it in the same directory as your HTML and CSS.

如果你需要支持旧版浏览器，请在下载套件之前在 Fontsquirrel Webfont Generator 中选择 "专家" 模式，选择 SVG、EOT 和 TTF 格式。

¥If you need to support legacy browsers, select the "Expert" mode in the Fontsquirrel Webfont Generator, select SVG, EOT, and TTF formats before downloading your kit.

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

¥Web services for font generation typically limit file sizes. In such a case, consider using tools such as:

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

¥Implementing the code in your demo

此时，解压刚刚生成的 webfont 套件。在解压后的目录中，你将看到一些有用的项目：

¥At this point, unzip the webfont kit you just generated. Inside the unzipped directory you'll see some useful items:

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

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

¥To implement these fonts in your demo, follow these steps:

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;
   

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

¥You should end up with a demo page with some nice fonts implemented on them. Because different fonts are created at different sizes, you may have to adjust the size, spacing, etc., to sort out the look and feel.

注意：如果你在使用时遇到任何问题，请随时将你的版本与我们完成的文件进行比较 - 请参阅 web-font-finished.html 和 web-font-finished.css。你还可以下载 代码来自 GitHub 或 实时运行完成的示例。

¥Note: If you have any problems getting this to work, feel free to compare your version to our finished files — see web-font-finished.html and web-font-finished.css. You can also download the code from GitHub or run the finished example live.

¥Using an online font service

在线字体服务通常会为你存储和提供字体，因此你不必担心编写 @font-face 代码。相反，你通常只需要在网站中插入一两行简单的代码即可使一切正常工作。示例包括 Adobe 字体 和 Cloud.typography。大多数这些服务都是基于订阅的，但 谷歌字体 是一个明显的例外，它是一项有用的免费服务，特别适合快速测试工作和编写演示。

¥Online font services generally store and serve fonts for you so you don't have to worry about writing the @font-face code. Instead, you generally just need to insert a simple line or two of code into your site to make everything work. Examples include Adobe Fonts and Cloud.typography. Most of these services are subscription-based, with the notable exception of Google Fonts, a useful free service, especially for rapid testing work and writing demos.

大多数这些服务都很容易使用，因此我们不会详细介绍它们。让我们快速浏览一下 Google Fonts，这样你就可以明白了。再次，使用 web-font-start.html 和 web-font-start.css 的副本作为起点。

¥Most of these services are easy to use, so we won't cover them in great detail. Let's have a quick look at Google Fonts so you can get the idea. Again, use copies of web-font-start.html and web-font-start.css as your starting point.

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

注意：如果你需要对照我们的 (现场观看) 检查你的工作，你可以在 google-font.html 和 google-font.css 找到完整版本。

¥Note: You can find a completed version at google-font.html and google-font.css, if you need to check your work against ours (see it live).

让我们探索一下 Fontsquirrel 为你生成的 @font-face 语法。其中一个规则集如下所示：

¥Let's explore that @font-face syntax generated for you by Fontsquirrel. This is what one of the rulesets looks like:

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

让我们仔细看看它的作用：

¥Let's go through it to see what it does:

• font-family：此行指定你要引用字体的名称。这可以是你喜欢的任何内容，只要你在整个 CSS 中一致地使用它即可。
• src：这些行指定要导入到 CSS 中的字体文件的路径（url 部分）以及每个字体文件的格式（format 部分）。每种情况下的后一部分都是可选的，但声明很有用，因为它允许浏览器更快地确定它们可以使用哪种字体。可以列出多个声明，用逗号分隔。因为浏览器会根据级联规则搜索它们，所以最好在开始时说明你的首选格式，例如 WOFF2。
• font-weight/font-style:这些行指定字体的粗细以及是否斜体。如果你要导入同一字体的多个粗细，你可以指定它们的粗细/样式，然后使用不同的 font-weight/font-style 值在它们之间进行选择，而不必将字体系列的所有不同成员称为不同的名称。Roger Johansson 的《@font-face tip:定义 font-weight 和 font-style 以保持 CSS 简单》更详细地展示了该做什么。

注意：你还可以为网络字体指定特定的 font-variant 和 font-stretch 值。在较新的浏览器中，你还可以指定 unicode-range 值，这是你可能想要在网络字体之外使用的特定字符范围。在支持的浏览器中，只有页面包含这些指定字符时才会下载字体，从而节省了不必要的下载。Drew McLellan 的 使用 Unicode 范围创建自定义字体堆栈 提供了一些关于如何利用这一点的有用想法。

¥Note: You can also specify particular font-variant and font-stretch values for your web fonts. In newer browsers, you can also specify a unicode-range value, which is a specific range of characters you might want to use out of the web font. In supporting browsers, the font will only be downloaded if the page contains those specified characters, saving unnecessary downloading. Creating Custom Font Stacks with Unicode-Range by Drew McLellan provides some useful ideas on how to make use of this.

¥Variable fonts

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

¥There is a newer font technology available in browsers called variable fonts. These are fonts that allow many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. They are somewhat advanced for our beginner's course, but if you fancy stretching yourself and looking into them, read our Variable fonts guide.

¥Summary

现在你已经阅读了我们有关文本样式基础知识的文章，现在是时候通过我们对该模块的评估来测试你的理解程度了：排版社区学校主页。

¥Now that you have worked through our articles on text styling fundamentals, it's time to test your comprehension with our assessment for the module: Typesetting a community school homepage.