科学字体生成器「谷雨解字」

网页字体详解

• 原文：《网页字体优化》
• 作者：Ilya Grigorik

网页字体格式

目前网络上使用的字体容器格式有四种： EOT、 TTF、 WOFF 和 WOFF2。 遗憾的是，尽管选择范围很广，但仍然缺少在所有新旧浏览器上都能使用的单一通用格式： EOT 只有 IE 支持，TTF 获得了部分 IE 支持，WOFF 获得了最广泛的支持，但在某些较旧的浏览器上不受支持，而 WOFF 2.0 支持对许多浏览器来说尚未实现。

那我们该怎么办？不存在在所有浏览器上都能使用的单一格式，这意味着我们需要提供多种格式才能实现一致的体验：

• 将 WOFF 2.0 变体提供给支持的浏览器。
• 将 WOFF 变体提供给大多数浏览器。
• 将 TTF 变体提供给旧版 Android（4.4 版以下）浏览器。
• 将 EOT 变体提供给旧版 IE（IE9 版以下）浏览器。

注：从技术上讲，还有另一种容器格式，即 SVG 字体容器，但 IE 或 Firefox 从未为其提供支持，并且现在 Chrome 也放弃了对它的支持。 因此，它的用途很有限，本指南中有意将其忽略。

通过压缩减小字体大小

字体是字形的集合，其中的每个字形都是一组描述字母形状的路径。 各个字形不同，但它们仍然包含大量相似信息，这些信息可通过 GZIP 或兼容的压缩工具进行压缩：

• EOT 和 TTF 格式默认情况下不进行压缩。 提供这些格式时，确保您的服务器配置为应用 GZIP 压缩。
• WOFF 具有内建压缩。 确保您的 WOFF 压缩工具使用了最佳压缩设置。
• WOFF2 采用自定义预处理和压缩算法，提供的文件大小压缩率比其他格式高大约 30%。 如需了解详细信息，请参阅 WOFF 2.0 评估报告。
• 最后，值得注意的是，某些字体格式包含附加的元数据，如字体提示和字距调整信息，这些信息在某些平台上可能并非必要信息，这样便可进一步优化文件大小。 查询您的字体压缩工具是否提供了优化选项，如果您这样做，请确保您有适合的基础架构来测试这些优化过的字体并将它们提供给每个特定浏览器。 例如，Google Fonts 为每一种字体维护有 30 多种优化过的变体，并自动检测和提供适合每一个平台和浏览器的最佳变体。

注：考虑使用 Zopfli 压缩处理 EOT、TTF 和 WOFF 格式。 Zopfli 是一种兼容 zlib 的压缩工具，提供的文件大小压缩率比 gzip 高大约 5%。

您可以通过 @font-face CSS at-rule 定义特定字体资源的位置、其样式特性及其应该用于的 Unicode 代码点。 可组合使用上述 `@font-face 声明来构建“字体系列”，浏览器将使用该系列来评估哪些字体资源需要下载并应用到当前网页。

格式选择

每个 @font-face 声明都提供字体系列的名称，它充当多个声明的逻辑组、字体属性（如样式、粗细和拉伸）以及为字体资源指定位置优先级列表的 src 描述符。

@font-face {
    font-family:'Awesome Font';
    font-style: normal;
    font-weight: 400;
    src: local('Awesome Font'),
         url('/fonts/awesome.woff2') format('woff2'),
         url('/fonts/awesome.woff') format('woff'),
         url('/fonts/awesome.ttf') format('truetype'),
         url('/fonts/awesome.eot') format('embedded-opentype');
  }
  
  @font-face {
    font-family:'Awesome Font';
    font-style: italic;
    font-weight: 400;
    src: local('Awesome Font Italic'),
         url('/fonts/awesome-i.woff2') format('woff2'),
         url('/fonts/awesome-i.woff') format('woff'),
         url('/fonts/awesome-i.ttf') format('truetype'),
         url('/fonts/awesome-i.eot') format('embedded-opentype');
  }
  

首先，请注意以上示例使用两种样式（normal 和_italic_）来定义单个 Awesome Font 系列，其中的每个样式均指向一个不同的字体资源集。 每个 src 描述符则又包含一个用逗号分隔的资源变体优先级列表：

• local() 指令用于引用、加载和使用安装在本地的字体。
• url() 指令用于加载外部字体，它可以包含可选的 format() 提示，指示由提供的网址引用的字体格式。

注：除非您引用的是其中一种默认系统字体，用户很少将其安装在本地，特别是在移动设备上，在移动设备上“安装” 附加字体实际上根本无法实现。 您始终应该从“以防万一”的 local() 条目入手，然后提供一个 url() 条目列表。

当浏览器确定需要字体时，它会按指定顺序循环访问提供的资源列表，并尝试加载相应的资源。 例如，接着上面的示例：

1. 浏览器执行页面布局并确定需要使用哪些字体变体来渲染网页上的指定文本。
2. 对于每一种必需字体，浏览器会检查字体文件是否位于本地。
3. 如果字体文件不在本地，则浏览器会遍历外部定义：
   • 如果存在格式提示，则浏览器会在启动下载之前检查其是否支持提示。 如果浏览器不支持此提示，则会前进到下一格式提示。
   • 如果不存在格式提示，则浏览器会下载资源。

您可以将本地和外部指令与相应的格式提示相结合来指定所有可用字体格式，其余工作交由浏览器进行处理。 浏览器确定需要哪些资源，并选择最佳格式。

注：字体变体的指定顺序很重要。 浏览器将选取其支持的第一种格式。 因此，如果您希望较新的浏览器使用 WOFF2，则应将 WOFF2 声明置于 WOFF 之上，依此类推。

优化加载和渲染

与普遍的观点相反，使用网页字体不需要延迟网页渲染，也不会对其他性能指标产生不良影响。 在充分优化的情况下使用字体可大幅提升总体用户体验：出色的品牌推广，改进的可读性、易用性和可搜索性，并一直提供可扩展的多分辨率解决方案，能够出色地适应各种屏幕格式和分辨率。 不要害怕使用网页字体！

不过，直接实现可能招致下载内容庞大和不必要的延迟。 您需要通过对字体资产本身及其在网页上的提取和使用方式进行优化来为浏览器提供协助的环节。

• 审核并监控您的字体使用情况：不要在网页上使用过多字体，并且对于每一种字体，最大限度减少使用的变体数量。 这将有助于为您的用户带来更加一致且更加快速的体验。
• 对您的字体资源进行子集内嵌：许多字体都可进行子集内嵌，或者拆分成多个 unicode-range 以仅提供特定网页需要的字形。 这样即可减小文件大小，并提高资源的下载速度。 不过，在定义子集时要注意针对字体重复使用的情况进行优化。 例如，您一定不希望在每个网页上都下载不同但重叠的字符集。 最好根据文字系统（例如拉丁文、西里尔文等）进行子集内嵌。
• 向每个浏览器提供优化过的字体格式：每一种字体都应以 WOFF2、WOFF、EOT 和 TTF 格式提供。 务必对 EOT 和 TTF 格式应用 GZIP 压缩，因为默认情况下不会对其进行压缩。
• 在 src 列表中优先列出 local()：在 src 列表中首先列出 local('Font Name') 可确保不会针对已安装的字体发出 HTTP 请求。
• 使用 <link rel="preload">、font-display 或 Font Loading API 来自定义字体加载和渲染：默认的延迟加载行为可能会导致延迟渲染文本。 您可以通过这些网络平台功能为特定字体替换这一行为，以及为网页上的不同内容指定自定义渲染和超时策略。
• 指定重新验证和最佳缓存策略：字体是不经常更新的静态资源。 确保您的服务器提供长期的 max-age 时间戳和重新验证令牌，以实现不同网页之间高效的字体重复使用。 如果使用 Service Worker，则适合采用缓存优先策略。