网页字体优化

2025-06-10

网页字体优化

网络字体使我们能够拥有良好的设计、品牌形象、可读性和可访问性。此外，它们还能提供可选、可搜索、可缩放和高 DPI 的文本。然而，每个优势都有其弊端。

所有其他部分：

第 1 部分：HTML 和 CSS

第 2 部分使用 Preload/Prefetch 来提升加载时间

第 3 部分 JavaScript 技巧和窍门

第 4 部分 图像优化

简介

如今人们大量使用网络字体，却没有意识到它对整体页面速度的影响有多大。

这并不意味着您不应该使用它们，只是您应该知道如何使用优化字体以及如何加载以减少对页面加载的影响。

网页字体的优化取决于字体托管位置、网页应用程序的设计和后端服务器、您的技术能力以及公司愿意为此投入多少资金。但不要因此而放弃我接下来要介绍的技巧，即使整体页面加载速度略有提升，也能提升用户体验。

了解您使用的字体数量

在开始这项任务之前，你应该先了解一下你的网站使用了哪些字体。你可以使用 Chrome DevTools 网络标签页中的“审核”选项卡，并查看 HTTP 请求，轻松找到这些信息。

进入选项卡后，单击过滤器图标并查找文件扩展名woff，如woff2、、等：tffotf

查找您正在使用的 Web 字体

决定多少才算太多

研究表明，平均有 67% 的网页使用自定义字体，网站平均有四个网页字体 HTTP 请求。

确定要使用多少种字体后，你就可以考虑该使用多少种字体了。通常这些决定是由用户体验或设计团队决定的，但你当然可以和他们商量一下。

如果您正在考虑多少才算太多，那么经验法则是三个是太多，两个是最好的。

如果在整个网站中使用较少的字体，不仅可以减少网络请求的数量，而且设计也会更加精简和一致。

选择您需要的子集

除非你的网站是支持多种语言的国际网站，否则没有必要使用所有字符集。只需根据你使用的语言选择所需的字符集即可。

Ilya Grigorik 是 Google 的开发倡导者和 Web Perf 专家，他解释了如何将 Web 字体子集或拆分为多个 unicode 范围，以仅提供您需要的内容。

您可以使用Unicode 范围描述符来指定范围值列表，该列表可以采用三种不同的形式设置：

  • 单个代码点：表示单个字符。
  • 间隔范围：表示字符范围的代码点的开始和结束。
  • 通配符范围：?字符表示任意十六进制数字。

为了演示这些可能性，你可以这样将Font Awesome拆分成拉丁语和日语子集。完成后，浏览器将根据需要下载每个子集。

注意： Unicode 范围子集对于亚洲语言尤其重要，因为亚洲语言的字形数量比西方语言多得多，并且典型的“完整”字体通常以兆字节而不是几十千字节来衡量。

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
    url('/fonts/awesome-l.woff2') format('woff2'),
    url('/fonts/awesome-l.woff') format('woff'),
    url('/fonts/awesome-l.ttf') format('truetype'),
    url('/fonts/awesome-l.eot') format('embedded-opentype');
  unicode-range: U+000-5FF; /* Latin glyphs */
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
    url('/fonts/awesome-jp.woff2') format('woff2'),
    url('/fonts/awesome-jp.woff') format('woff'),
    url('/fonts/awesome-jp.ttf') format('truetype'),
    url('/fonts/awesome-jp.eot') format('embedded-opentype');
  unicode-range: U+3000-9FFF, U+ff??; /* Japanese glyphs */
}
Enter fullscreen mode Exit fullscreen mode

注意：该local()指令允许您引用、加载和使用本地安装的字体。该url()指令允许您加载外部字体，并允许包含一个可选format()提示，指示所提供 URL 所引用字体的格式。

然而，有一个问题，并非所有浏览器都支持 unicode-range。幸运的是，大多数主流浏览器都支持它，你需要一个后备选项。

现在，如果您问我如何确定我需要哪些子集，答案是：

  • 如果浏览器支持 unicode-range，它将自动选择正确的子集。您只需提供子集文件并在@font-face规则中指定适当的范围即可。
  • 如果浏览器不支持此功能，那么您将需要隐藏所有不必要的子集，也就是说，您必须手动指定所需的子集。

您可以使用名为pyftsubset的开源工具生成子集。此外，某些字体服务允许通过自定义查询参数手动进行子集设置。

除了子集之外，您还可以利用其他一些机会。假设您只需要一种 Google 字体来显示页面标题。您可以使用以下&text=语法指定仅从该字体下载哪些字符：

<link
  href="//fonts.googleapis.com/css?family=Roboto&text=log"
  rel="stylesheet"
/>
Enter fullscreen mode Exit fullscreen mode

警告：您需要小心，因为这不是单词选择器，而是字符选择器。这意味着字符l、o、 和g将显示在 Roboto 上。

此图显示仅字母 g 使用 Roboto 字体呈现

提供优化的字体格式

网络上主要使用四种格式：

  • 嵌入式开放类型（EOT）：微软设计了这种格式，目前仅有IE浏览器使用。
  • True Type Font (TTF)：一种自 20 世纪 80 年代末出现并部分支持 IE 的格式。
  • Web 开放字体格式 (WOFF)：一种开发于 2009 年的格式，本质上是 OpenType 或 TrueType，并添加了压缩和附加元数据。它得到了广泛的支持，但在某些较旧的浏览器中不可用。
  • Web 开放字体格式 (WOFF2)：WOFF 的改进版本，平均可将文件大小减少 30%。许多浏览器仍在努力支持该格式。

没有一种格式可以兼容所有浏览器，因此需要提供多种格式才能提供一致的体验。摘自谷歌开发者网站：

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

如果大多数用户使用现代网络浏览器，您只需指定两种格式即可：

@font-face {
  font-family: 'Roboto';
  src: local('Roboto'), local('Roboto'),
    url(fonts/Roboto.woff2) format('woff2');
}
Enter fullscreen mode Exit fullscreen mode

始终在本地检查字体

有些用户可能已经在系统中安装了这些字体，所以为什么要强制他们再次下载呢？您可以通过确保local()在src字体样式规则的属性中优先使用 来避免这种情况。

在上面的示例中，请注意如何src: local在 之前使用url。

优化加载和渲染

默认情况下，字体是延迟加载的，这意味着网络请求会被延迟，直到渲染树完全构建完成，进而导致文本渲染延迟。

实现自定义字体加载策略需要三个钩子：

  • <link rel=preload>
  • CSSfont-display属性
  • 字体加载API

预加载你的网络字体

如果页面中使用该字体的可能性很高，那么您可以使用平台功能即时加载该字体：<link rel=preload>。

这会告诉浏览器应该尽早获取字体，但不会指定如何使用它。您需要指定适当的 CSS @font-face：

<link
  rel="preload"
  href="/fonts/Roboto.woff2"
  as="font"
/>
Enter fullscreen mode Exit fullscreen mode 
@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  /* will be preloaded */
  src: local('Awesome Font'),
    url('/fonts/awesome-l.woff2') format('woff2'),
    url('/fonts/awesome-l.woff') format('woff'),
    url('/fonts/awesome-l.ttf') format('truetype'),
    url('/fonts/awesome-l.eot') format('embedded-opentype');
  unicode-range: U+000-5FF; /* Latin glyphs */
}
Enter fullscreen mode Exit fullscreen mode

警告：并非所有浏览器都支持此功能，但支持此功能的浏览器也支持 WOFF2，因此您应该使用该格式。

有关其他解决方案的更多信息，请参阅这篇精彩的文章。

概括

简而言之，优化 Web 字体时需要考虑以下几点：

  • 审核并监控您的字体使用情况。
  • 子集化您的字体资源。
  • 为每个浏览器提供优化的字体格式。
  • local()在您的src列表中优先考虑。
  • <link rel="preload">使用、font-display或字体加载 API自定义字体加载和渲染。
  • 指定重新验证和最佳缓存策略

希望这能帮助您朝着正确的方向迈出一步，以提高您的 Web 应用程序的性能。

鏂囩珷鏉ユ簮锛�https://dev.to/yashints/web-font-optimization-156a
Devto 翻译
PREV
关于全屏 API 你需要知道的一切💻
NEXT
你应该了解的 React Hooks🔥🔥🔥 awesome-react-hooks