WordPress交流

网页字体优化指南

—

目录

版式是良好网页设计的基础——可读性、易读性、可访问性和精心设计的品牌对于成功传达信息至关重要。网络字体实现了这一切，允许文本可选择、可搜索和可缩放，同时无论屏幕尺寸和分辨率如何，都可以提供一致且清晰的渲染。

然而，这种改进的用户体验可能会带来性能成本：您使用的每种字体都是访问者在访问您的网站时必须下载的额外资源，从而增加了加载页面所需的时间。

但使用网络字体并不意味着您的页面必须很慢。事实上，使用优化的字体以及如何加载和应用到网站的审慎策略可以帮助减少页面总大小并提高页面速度。更重要的是，优化网页字体将提高 Core Web Vitals 等级– 特别是CLS 指标。

什么是网络字体？

网络上使用的字体有两种基本类型：

  • Web 安全字体：这些是设备上预安装的标准字体，包括 Times New Roman、Arial 和 Courier。
  • Webfonts：这些字体不是预安装的，必须由浏览器下载才能显示。

对于普通人来说，网络字体是字母表字母的集合，至少对于我们说英语的人来说是这样。但深入研究，它们实际上是字形的集合，每个字形都是一个矢量形状，描述了多种语言的字母或符号，而不仅仅是英语。

有两个变量决定特定字体文件的大小：每个字形矢量路径的复杂性和特定字体中字形的数量。例如，Open Sans（一种流行的网络字体）包含 897 个字形，包括拉丁文、希腊文和西里尔文字符。

open-sans
 Open Sans 包含数百个字形。

托管和交付网络字体

当您选择使用网络字体时，它必须存储在某个地方。有两种托管网络字体的选项：

  • 自托管：将字体资源与网站文件的其余部分一起托管在您的网络服务器上。
  • 第三方托管：使用 Adob​​e Typekit、Fonts.com 或 Google Fonts 等字体服务。

这些选项各有优点和缺点。虽然使用第三方解决方案可能更容易设置，但这意味着您无法控制性能和安全性，甚至即使服务出现故障也是如此。2015 年，当Typekit 的服务器崩溃时，世界各地的网站都被迫使用 Arial 和 Georgia。

但是，如果您不担心停机（Typekit 仅停机了四个小时）、速度或交付，如果您不想处理自托管字体资源，那么第三方托管可能是您的首选。

优化字体的技巧

Web 字体优化是一个复杂的主题，有许多不同的方法来优化字体的交付。具体如何优化字体将取决于您的托管偏好、站点的设计和服务器、您的技术能力以及您愿意在多大程度上提高字体的性能。

在开始优化字体之前，最好准确了解您正在使用的字体数量。一个简单的方法是通过速度测试工具（例如GTmetrix或 Pingdom ）运行您的网站，以便您可以分析生成的瀑布图并查看您的 HTTP 请求。有时，插件和主题可能使用您不知道的字体。

您可以采取以下一些步骤来优化字体的交付。

1. 审核和监控字体使用

随着浏览器对 CSS @font-face 规则的支持越来越广泛，自定义网络字体的使用呈爆炸式增长。根据 HTTP Archive，67% 的网页现在使用自定义字体，网站平均有四种字体 HTTP 请求。

到底有多少字体算太多，目前还没有定论，不过一般的经验法则是，三种字体就够了，而且最好坚持使用两种字体——一种用于标题，一种用于正文。

最大限度地减少使用的网络字体数量不仅有助于减少 HTTP 请求的总数，还可以确保网站设计更加精简和一致。以LINGsCARS为例。它有如此多的字体和其他荒谬的元素，让我想把我的眼睛挖出来。幸运的是，它仅使用网络安全字体以使其加载速度更快。

考虑变化也很重要，例如斜体、粗体和其他粗细。每种字体变体都会增加文件大小的重量，因此请尽量避免添加您不打算使用的字体。

2. 字体资源子集

除非您在整个网站上提供翻译，否则最好将字符集保持在最低限度。这意味着仅提供您需要的语言的字符。

正如 Google Web Perf Guru Ilya Grigorik 所解释的那样，许多字体可以是子集，甚至可以拆分为多个 Unicode 范围，以仅提供特定页面所需的字符。使用@font-face，您可以使用Unicode范围描述符来指定范围值列表，可以以三种不同的形式设置：

  • 单个代码点（例如，U+416）：表示单个字符。
  • 间隔范围（例如，U+400-4ff）：指示字符范围的开始和结束代码点。
  • 通配符范围（例如，U+4??）：？字符表示任何十六进制数字。

例如，以下是如何将 Awesome Font 系列拆分为拉丁语和日语子集，浏览器将根据用户的需要下载每个子集：

@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 */
}

Grigorik 表示，在定义子集时，优化字体重用非常重要。例如，不要在每个页面上下载不同的重叠字符集。最好根据脚本（例如拉丁文、西里尔文等）进行子集化。

如果 Google 网络字体的唯一目的是显示您的网站标题，这里有一个提示：仅下载标题中使用的特定字符。您可以通过添加 &text= 后跟您希望下载的特定字母到 Google Fonts URL 的末尾来完成此操作。

例如，如果您想使用 Montserrat 加载单词 Blog，您可以使用以下命令：

<link href='//fonts.googleapis.com/css?family=Montserrat&text=Blog' rel='stylesheet'>

此链接告诉 Google Fonts CDN 仅传送大写字母 B 和小写字母 l、o 和 g，而忽略所有其他字符。

3. 为每个浏览器提供优化的字体格式

网络上使用的字体容器格式有四种：EOT、TTF、WOFF 和 WOFF2。

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

不幸的是，没有一种格式适用于所有浏览器，这意味着您需要提供多种格式。在决定确切使用哪种格式时，检查 Google Analytics（分析）以了解哪些浏览器和设备最受访问者欢迎会很有帮助。

如果您的访问者主要使用现代浏览器，您可以只指定两种格式，如下所示：

@font-face {
font-family: 'Montserrat';
src: local('Montserrat'), local('Montserrat'),
url('fonts/Montserrat.woff2') format('woff2'),
url('fonts/Montserrat.woff') format('woff');
}

第一种格式 WOFF2 为您提供了额外压缩的优势。它的浏览器不支持 WOFF2，它依赖于 WOFF，WOFF 也具有良好的压缩性并支持所有主要浏览器的最新版本。但是，缺乏对 Opera Mini、IE8 和旧版 Android 浏览器的支持。虽然这可能是一个问题，但这些浏览器会自动默认为网络安全字体。

4. src列表中优先考虑local()

虽然您希望网站访问者在其计算机上预装网络安全字体，但无法预测他们是否已经拥有特定的网络字体。以我为例。我的计算机上安装了数十种网络字体，因此当我访问网站时，我必须下载已有的网络字体是没有意义的。

另一个缺点是，当字体加载到浏览器中时，会显示空白（Flash of Invisible Text，又名 FOIT）或无样式文本（Flash of Unstyled Content，又名 FOUC）。对于已经在计算机上本地安装了该字体的用户来说，这是绝对不必要的。

解决这个问题的方法非常简单：使用 local() 来检查用户系统上是否已存在字体。在 src 列表中首先列出 local(‘Font Name’) 可确保不会对已存在的字体发出 HTTP 请求。

5.尽早提出字体请求

默认情况下，@font-face 延迟加载字体。这意味着字体请求会被延迟，直到页面内容加载之后。就速度和性能而言，如果您欣赏渐进增强技术，这是一件好事。

但是，如果用户体验是重中之重，并且您不喜欢 FOIT 的不和谐体验，则您可能需要针对特定​​字体（例如标题文本）覆盖此行为。

您可以使用<link rel=”preload”>、font-display或Font Loading API自定义字体加载和渲染。

<link rel=”preload”> 告诉浏览器即将需要某种字体，但没有说明如何使用它。使用方法如下：

HTML：

<head>
<!-- Other tags... -->
<link rel="preload" href="/fonts/awesome-l.woff2" as="font">
</head>

CSS：

@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
src: local('Awesome Font'),
url('/fonts/awesome-l.woff2') format('woff2'), /* will be preloaded */
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 声明放在所有 <script> 标记之上。

有关如何使用 font-display 的更多信息，请查看 CSS-Tricks 的“font-display” for the Masses。

6. 适当的缓存是必须的

由于字体是不经常更新的静态资源，因此可以将它们缓存在浏览器本地，从而使用户下次访问您的网站时不必再次下载您的字体。这样，用户浏览器必须下载的数据量以及 HTTP 请求的数量都会减少。

Google 的 Web 基础指南建议确保您的服务器提供长期有效的 max-age 时间戳和重新验证令牌，以便在网站上的不同页面之间实现高效的字体重用。您还应该避免使用localStorage或IndexedDB存储字体，因为它们都有各自的性能问题。

请注意，浏览器缓存只能应用于您从自己的域或 CDN 提供的字体 – 您无法控制从第三方提供的字体的浏览器缓存，例如 Google Fonts 等。

评论

一条对“网页字体优化指南”的回复

  1. naked2020
    naked2020

    这个很不错 对网站优化来说

    回复

发表回复

必填项已用 * 标注