理解网页字体并充分利用它们

Thierry Blancpain 是纽约市 Informal Inquiry 的品牌和交互设计师，也是瑞士字体铸造厂 Grilli Type 的联合创始人。虽然本文普遍适用于所有网页字体，但 Grilli Type 字体贯穿始终，作为概念的示例，特别是那些展示 OpenType 功能的示例。

使用您自己的字体而不是系统字体变得越来越容易，但它仍然是一个不断发展领域。在本文中，我们将介绍不同类型的字体格式，并涵盖它们的技巧和最佳实践。我们还将深入探讨更多高级功能，以便那些希望提升水平并旨在通过高级概念和在使用网页字体时的注意事项来完善技艺的用户。最后，您希望能够不仅能够使用网页字体，还能充分利用它们。

我们开始吧！

字体格式

当您购买网页字体许可证时，您会收到一个字体文件包，其中通常包含以下至少某些格式

• 嵌入式 OpenType (EOT)：EOT 是微软开发的传统格式。较旧的 Internet Explorer 版本需要 EOT 来渲染您的网页字体。EOT 通常以未压缩的形式提供，因此，如果您不需要像 IE8 及以下这样的浏览器支持，那么最好将其排除在外。
• TrueType (TTF)：TTF 是微软和苹果公司在 20 世纪 80 年代开发的字体格式。现代 TTF 文件也称为 TrueType OpenType 字体。TTF 可以帮助扩展对某些旧版浏览器的支持，尤其是在移动设备上，如果您需要的话。
• 网页开放字体格式 (WOFF)：WOFF 于 2009 年开发，作为 TrueType 和 OpenType 字体的包装格式。它压缩文件并受所有现代浏览器支持。
• 网页开放字体格式 2 (WOFF2)：WOFF2 是原始 WOFF 格式的更新。由 Google 开发，这被认为是最好的格式，因为它为支持它的现代浏览器提供了更小的文件大小和更好的性能。

如果您主要针对使用现代浏览器的用户，则可以使用渐进式方法使用 @font-face，该方法仅提供 WOFF 和 WOFF2 格式。这些提供了最佳压缩，并允许您在代码中处理更少的文件。如果用户的机器非常旧，不支持这两种格式中的任何一种，那么出于性能原因，最好只为他们提供系统字体。

如果您希望尽可能广泛地扩展支持，则添加 EOT 和 TTF 文件。SVG 字体也传统上用于扩展浏览器支持，但在 Grilli Type，我们不再提供 SVG 字体，因为它们带来了一些缺点。例如，Google Chrome 甚至完全删除了对该格式的支持。

嵌入网页字体

我们利用 @font-face 在 CSS 中包含字体。

这是最深入的支持级别，包括我们迄今讨论的所有字体文件格式

@font-face {
  font-family: FontName;
  src: url('path/filename.eot');
  src: url('path/filename.eot?#iefix') format('embedded-opentype'),
    url('path/filename.woff2') format('woff2'), 
    url('path/filename.woff') format('woff'),
    url('path/filename.ttf') format('truetype');
}

如果我们只打算支持现代浏览器，我们可以将内容大大精简。

@font-face {
  font-family: FontName;
  src: url('path/filename.woff2') format('woff2'), 
    url('path/filename.woff') format('woff');
}

一旦字体被声明和定义，我们就可以在我们的元素上使用它。例如

body {
  font-family: 'FontName', Helvetica, Arial, sans-serif;
}

托管网页字体

加载网页字体最灵活的方法之一是自行托管它们。这意味着您在自己的服务器上托管文件，并且当访问者访问您的网站时，您的字体将始终可用，无需第三方依赖项。通常不需要跟踪代码或 JavaScript 来加载自行托管的字体文件。许多小型字体铸造厂提供直接下载的字体，以便可以自行托管，在 Grilli Type，我们相信这是提供字体的最佳方式。

虽然一些字体铸造厂提供自行托管（既有繁琐的限制和要求，也有没有的），但其他一些只提供托管解决方案，这意味着他们代表您托管文件。一些知名的包括 Hoefler & Co.、Font Bureau 和 Typotheque。Font Bureau 和 Typotheque 以不同的价格点提供两种方式的字体。

在您购买许可证之前，请确保您了解字体铸造厂的网页字体是如何提供的，因为托管和使用条款的差异会影响它们的实现方式。获得最适合您并满足您需求的内容，并确保您在合法使用它们，并根据铸造厂的许可协议。

高级排版功能

让我们看看网页字体的一些更高级的功能。

间距和字距调整

字体文件中有两个设置定义了 字符之间的间距

1. letter-spacing：这被定义为每个字符左侧和右侧的边轴承
2. font-kerning：这指的是两个字符之间的特定调整

间距根本无法关闭，因为否则文本渲染引擎（您的浏览器）将不知道如何处理这些字母。另一方面，字距调整在浏览器中默认关闭，您必须在 CSS 中将其打开。

控制字距调整比您想象的要容易！以下是如何在所有支持它的浏览器中激活它的方法

p {
  font-feature-settings: "kern" 1;
  font-kerning: normal;
}

如果您不使用类似 Autoprefixer 的工具来帮助管理 CSS 中的浏览器支持，那么您需要手动编写此设置的浏览器供应商前缀以将浏览器支持扩展到旧版本

/* All vendor prefixes for `font-feature-settings` */
p {
  -moz-font-feature-settings:    "kern" 1; 
  -ms-font-feature-settings:     "kern" 1; 
  -o-font-feature-settings:      "kern" 1; 
  -webkit-font-feature-settings: "kern" 1; 
  font-feature-settings:         "kern" 1;
  font-kerning: normal;
}

高级 OpenType 功能

我们刚刚讨论了如何使用 font-feature-settings 属性来控制字距调整，但它也可以用于控制网页字体中其他可用的 OpenType 功能。支持的功能数量随着时间的推移而不断增长，CSS-Tricks 年鉴 是参考 OpenType 可能性的好去处。

OpenType 功能非常令人兴奋，因为它们开辟了许多控制字体的可能性，而无需提供多个文件即可获得相同的效果。同时，值得注意的是，OpenType 字体文件支持的功能取决于字体设计师，并非所有字体都支持相同的功能。

为了说明高级 OpenType 功能如何链接在一起，以下代码将打开支持旧式数字 (onum) 和比例数字 (pnum) 的 OpenType 启用的字体的数字字符，以及启用字距调整并激活字体中包含的特定风格集

.my-element {
  font-feature-settings: "onum" 1, "pnum" 1, "kern" 1, "ss01" 1;
}

font-feature-settings 属性可用于激活风格替换、可选连字、字体中可用的不同类型的数字、小型大写字母和其他方便的功能。Typofonderie 对这些高级功能有一个很好的 概述，包括示例。

由于 font-feature-settings 用于同时设置许多 OpenType 功能，因此无法将单个设置定义为不同，因为其他选择将不会被继承。所有功能都需要重新定义才能更改子元素的设置。

行距和字间距

CSS 长期以来一直支持 letter-spacing 和 word-spacing 属性。当正确使用时，两者都提供了对字体外观两个非常重要方面的相当程度的控制。

与所有排版相关的事情一样，您需要学习如何从功能和视觉上评估不同的选项，并根据您的印象做出决定。不同的上下文可能需要不同的间距需求。

在较小的尺寸下，大多数字体都会受益于字符和单词之间稍微增加的间距。在较大的上下文中，例如标题，字体可能受益于更窄的间距。无论哪种情况，正确的决策都需要关注和您根据结果做出的最佳判断。

我发现letter-spacing 和 word-spacing 都最适合使用em 单位作为值。这使得间距可以根据应用它们的元素的字体大小进行灵活调整。以下示例将为您的内容在较小的字体大小下提供更多呼吸空间

p {
  font-size: 12px;
  letter-spacing: 0.015em;
  word-spacing: 0.001em;
}

字体渲染

在屏幕上使用字体会引发有关它们如何渲染的重要问题。字体通常是在大约1000 个单位高的网格（甚至更大）上设计的，但随后以大约16px的字体大小显示。在设备、屏幕和软件之间的相互作用中，这种分辨率和保真度的降低需要一些智能才能使小型字体清晰易读且美观。同样，请保持观察，在许多浏览器中进行测试，并运用您的最佳判断来使用最佳方法提高清晰度。

提示

每个操作系统对字体的处理方式都不同。在 MacOS 中，智能功能位于操作系统中（因此可以随着时间的推移而发展），而字体本身可以是“哑”的。从历史上看，在 Windows 上，智能功能应该包含在字体软件中，并且系统应该使用这些智能功能来决定字体如何在不同大小下呈现。

这些智能功能称为提示。嵌入在字体文件中的提示信息可以告诉计算机“H”字符的两个笔画应该具有相同的线宽，或者横杠上下的空间在较小尺寸下应该保持大致相等。

提示是一个非常复杂和复杂的话题，但重要的收获是，即使在同一台计算机上，相同字体在相同大小下也可能呈现出不同的效果，这取决于许多因素，包括屏幕、浏览器，甚至字体和背景颜色。

Microsoft 提供了一份关于提示主题的指南。即使它最初是在 1997 年发布的，它仍然是一篇很好的读物，因为它非常彻底地探讨了这个主题。

字体平滑

虽然在 MacOS 上大多忽略了字体文件中包含的提示信息，但特定的浏览器提供了一些对字体渲染的额外控制。

p {
  -webkit-font-smoothing: antialiased; /* Chrome, Safari */
  -moz-osx-font-smoothing: grayscale; /* Firefox */
}

使用这些 CSS 属性可以在 MacOS 和 iOS 上实现更清晰、更细的文本渲染。但请注意：这也会导致渲染问题，尤其是在您已经使用细字体或字体粗细的情况下。

antialiased 和 grayscale 主要是用于在使用深色背景上的浅色文本时平衡字体的渲染，因为否则它们会被渲染得更粗一些。

font-smoothing 属性及其值并非成为标准 CSS 功能的路径，因此请谨慎使用，也许仅在您知道需要针对特定浏览器和上下文的上下文中使用。

注意：OptimizeLegibility

在对 Grilli Type 客户网站上的字体使用进行故障排除时，我们经常会遇到此属性。

p {
  text-rendering: optimizeLegibility;
}

除其他事项外，它会激活字距调整。这在某些时候非常有用，但现在不再需要（如上所示）。除了字距调整之外，它还会激活各种连字，包括字体文件中可能存在的奢华连字。

尽管有一些用例，但如果您不确切知道自己在做什么，请不要使用此功能。很有可能您根本不需要它。

网络字体资源

如果您已准备好更深入地了解网络字体，以下是一些推荐的资源，您可以使用它们来了解更多信息

• Clagnut 的 OpenType CSS 沙盒 由 Richard Rutter 提供：一个测试 OpenType 功能并轻松构建所需的 CSS 代码的好地方。
• 网络字体手册 由 Bram Stein 提供：这是您可以阅读的关于网络字体、字体渲染和字体性能的最深入的电子书。
• 复制粘贴字符：这是一个很棒的网站，允许您访问您可能使用的任何特殊字符。
• 使用 @font-face 由 CSS-Tricks 提供：本文包含根据不同浏览器支持声明网络字体的代码片段。

高级网络字体注意事项

对于那些准备提升到更高级技术的读者，这里还有更多需要考虑的事项

上传许可的字体到 Github

如果您将项目提交到公共存储库并使用已获得许可的字体文件，请确保字体或包含它们的目录已包含在您的.gitignore 文件中，以防止它们被上传。这将防止其他人获取和使用您的字体文件，并且可以防止您违反许可字体的任何使用条款，这些条款通常具有使用和共享限制。

.DS_Store
  path/to/web/fonts/folder/*

字体加载策略

加载网络字体可以像简单地使用@font-face 一样简单，但这并不一定能提供最佳性能。例如，它会打开“未设置样式文本闪现”（FOUT）的可能性，在某些情况下这可能会被认为是糟糕的用户体验。Zach Leatherman 的“网络字体加载策略综合指南”涵盖了这一点以及改进加载体验的方法，这将让您和您的用户非常满意。

Base64 编码的字体文件

在一些罕见的情况下，将您的字体作为base64 编码到您的 CSS 中是一个好主意，但通常情况下并非如此——更不用说，您可能会在此过程中违反字体的许可协议。在考虑base64 时，请务必谨慎行事并阅读字体的使用条款。

CSS 文本装饰

W3C 正在起草新的文本装饰控制草案，主要涉及如何在 CSS 中更好地和更容易地进行下划线文本。这在所有浏览器中尚不可用，但请查看！

可变字体

2017 年发布了 OpenType 字体规范 1.8.2，它引入了所谓的可变字体。这个 OpenType 的新版本允许将多种字体样式包含在一个字体文件中，从而减少服务器请求和网页字体文件的大小。根据字体设计师的选择，它还可以允许在现有字体的粗细和宽度之间使用任意粗细和宽度，以及其他功能。Axis Praxis 是一个体验一些现有测试字体的不错网站——不过，您需要使用较新的 Safari 或 Chrome 版本才能使用它。

总结

我们在本文中涵盖了很多内容！希望您现在对现有的不同字体文件、如何使用它们以及使用传统方法和尖端功能对字体进行样式设置的所有强大方法有了很好的了解。