优化 Google 字体性能
已发表: 2020-03-28令人惊叹的图像和字体为优秀的网站设计增光添彩。 不幸的是，这两个 Web 元素在很大程度上促成了许多网站出现令人讨厌的延迟的原因。 当然，只有网络字体才能提供令人耳目一新、出乎意料和新奇的东西。
然而，有办法遏制这种可怕的现象。 SVG 正在帮助开发人员应对图像渲染的一些挑战。 而对于最常用的网络字体 Google Fonts 来说，改进页面的渲染时间只是部署几个可用的技巧来优化 Google Font 的性能。
什么是谷歌字体？
谷歌字体是专门调整的字形集合，构成在网站上使用的字体。 它们专门设计用于在 Internet 上使用，因此称为网络字体。
网络字体的解剖结构最好被描述为一组矢量形状（字形），这些形状经过特殊排列以形成符号或书写字母。
谷歌字体于 2010 年推出，当时只有大约 30 种字体，现在谷歌字体拥有大约 170 亿种字体，目前为所有网站的 57% 左右提供支持。 完全免费的谷歌字体在撰写本文时每秒记录约 500,000 次浏览量，自 2010 年以来已累积超过 37 万亿次浏览量。
在您的网站上使用 Google 字体可以让您摆脱对系统字体或“网络安全字体”的限制，例如 Arial 和 Georgia，这些字体大多预装在所有操作系统中。
如何实现谷歌字体
网站上的 Google 字体实施是使用应用程序编程接口 (API) 完成的，参考用户选择的字体。 Google 提供的这个 API 可以使用标准 CSS 链接标签或导入语法嵌入到您的 HTML 文档中。 下面是用于实现 Baloo Chettan 2 的 API 示例。
使用标准 CSS 链接标签
使用导入语法<style>
@import url('https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap');
</style>
使用 HTML 文档中的上述任何 API，您可以通过引用来在 CSS 文档中使用 font-family，如下例所示。
font-family : 'Baloo Chettan 2'，草书；
优化 Google 字体性能的重要性
与其他网络字体一样，实施和使用 Google 字体并不是什么大不了的事，只是将字体交付给您的网站访问者。 请记住，用户的设备上没有这些字体。 换句话说，他们的浏览器必须先下载它们，然后才能看到您的网站内容。
字体粗细
每种字体都有一个权重，可能会对您网站的延迟产生负面影响。 例如，Google 的 Baloo Chettan 2 字体的总大小为 720 KB。 这意味着如果您必须使用整个 Baloo 字体系列 (19) 以及您网站上所有可用的语言和变体，您需要在网站加载中考虑大约 9MB。 当然，这是不理想的，与网络字体优化没有任何关系。 但是，弄错意味着让您的网站访问者等待几秒钟，然后他们才能看到您网站上的任何文字。
字体格式
到目前为止，网络上使用的主要网络字体格式有四 (4) 种。 它们是 TrueType 字体 (TTF)、Embedded Open Type (EOT)、Web Open Font Format (WOFF) 和 Web Open Font Format 2.0 (WOFF2)。
不幸的是，这些格式都不被认为是适用于所有浏览器的通用格式。
仅 IE 支持 EOT。 Chrome 和 Opera 对大多数格式的支持最多，而大约 86% 的浏览器支持 WOFF 格式。 这可能要求您包含要使用的每种字体的所有字体格式。 这个想法是通过确保所有浏览器都可以显示每种字体来提供一致的体验。
这些问题是迫切需要优化 Google 字体性能的众多原因的一部分。
优化 Google 字体性能
Google 字体优化从您的 Font API 位置和请求格式开始，一直到渲染。 以下是有关如何优化 Google 字体的简单技巧。
预加载 Google 字体资源
强烈建议您使用新的网络平台功能： <link rel="preload"> ，它可以让您提前加载网络字体。 此功能允许您绕过默认浏览器行为，该行为通常会延迟文本渲染，方法是首先构建渲染树以在访问资源链接之前知道它需要哪些字体资源。
<link rel="preload">通常包含在 HTML 的<head>标记中，以便尽早触发对字体的请求，而无需等待 CSSOM 的创建。 该功能仅向浏览器提供即将需要您的网络字体的预先信息，而不提供有关如何使用它们的任何信息。
此外，建议您在预加载功能旁边使用合适的 CSS @font-face 定义，以告知浏览器如何使用资源 URL。 请参阅下一点中的示例。
注意：并非所有浏览器都支持 <link rel=”preload”>。 不支持它的浏览器只会忽略代码。 但是，当存在首选字体的远程副本时，此功能有时会产生浪费的请求。
对多种字体使用一个请求
谷歌字体优化的另一个好方法是将多个字体请求组合到一个标签中。 不为每种字体包含单独的 <link> 标签，从而分批发送多个请求。 要组合字体请求，只需将 API 中的字体用 | 分隔即可。 特点。 但是，这也可以通过简单地在 Google 字体页面上一次选择您需要的所有字体来实现。
错误的字体请求格式：
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap"
rel="stylesheet">
推荐的字体请求格式：
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2|Roboto&display=swap"
rel="stylesheet">
通过将多个字体请求组合到一个标签中，我们可以避免浏览器多次访问服务器，并且还可以帮助旧浏览器在每个域一次最多 2 个连接。
优化所有浏览器的字体格式
不支持特定字体格式的浏览器会忽略它并跳转到渲染树的下一步。 为了提供一致的体验，您需要在 CSS @font-face 声明中包含所有字体格式。
但是，重量可以减轻。 描述字体的各个图形由类似的信息组成，这些信息可以使用兼容的压缩器（例如 GZIP）进行压缩。 虽然 TTF 和 EOT 格式默认压缩，但您需要确保您的服务器配置为在交付两种字体格式时应用压缩。
为 WOFF 使用最佳压缩设置，它具有内置压缩功能，并采用自定义预处理和压缩算法来交付 WOFF2，文件大小减少约 30%。
CSS @font-face 声明示例@font-face {
font-family: 'Baloo Chettan 2';
font-style: normal;
font-weight: 600;
src: local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Android, Safari */
url('/fonts/awesome.svg') format('svg'); /* Super modern web browsers */
注意： src: 指向多个资源变体，而 url() 允许您加载外部字体，而 local() 允许您在本地获取字体。 format() 表示特定 URL 中的字体格式。
优先考虑 src 列表中的 local()
尽管除非您引用默认系统字体，否则这种 Google 字体优化想法可能并不真正适用于手机用户，但它仍然是优化网络字体的有效技巧。
如果您查看上面的 CSS @font-face 声明示例，您会注意到 local() 在 src: 描述符中以逗号分隔的资源变体列表的顶部。 这种优先级是故意的，其想法是将用户浏览器发送到本地字体的第一个来源，然后在本地不可用时选择下载它们。
这确保了浏览器不会继续下载已安装在用户计算机上的本地字体，从而确保更好的网站性能。
自定义字体渲染：CSS font-display
使用@font-face 的字体显示描述符控制字体性能，您可以根据下载所需的时间来决定应该如何呈现 Google 字体。 最初，当字体加载时间过长时，Web 浏览器有默认设置。 他们中的大多数设置了一个超时，之后他们使用后备字体，但不幸的是，他们的超时时间不同。
如果网络字体尚未准备好，Chrome 和 Firefox 会在三秒后使用备用字体，并会在下载后立即将文本交换为预期的字体。 Internet Explorer 将在 0 秒内执行相同的操作，而 Safari 没有字体呈现超时行为。
新引入的 font-display 属性目前支持五种取值范围： auto | 块| 交换| 后备| 可选的
如果以特定字体呈现文本非常重要，则应将该属性设置为块值。 这是因为它允许浏览器在未准备好时使用无敌文本代替首选字体，并在完成下载后立即将其换入。 大多数浏览器使用这个值作为它们的默认 ( auto ) 值。
如果您有能力渲染临时字体，直到首选字体准备好，则可以使用交换。 Swap 类似于块，但在页面开始加载时立即呈现后备字体，并在它们准备好后立即用首选字体替换它们。 该值具有无限交换周期和零秒块周期。
交换值对于正文并不理想，以免因移动文本而中断读者体验。 您可以将其用于徽标文本，您需要使用后备快速显示公司名称或口号，但最终需要官方字体用于品牌推广。
示例：字体显示属性设置为交换@font-face {
font-family : 'Baloo Chettan 2';
font-style : normal;
font-weight : 600;
font- display : swap
src : local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'); /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Safari, Android */
url('/fonts/awesome.svg') format('svg'); /* modern web browsers */
可以看到交换值在用于演示如何在 HTML 文档中链接 Google 字体的第一行代码（Google 字体 API）中实现。
回退类似于交换，但交换期有限。 如果首选字体未在设定的时间段内（通常是零秒）加载，则文本将在页面的剩余生命周期内保持备用字体。 这是正文的一个很好的候选； 它尽可能快地呈现文本，并且在任何人开始阅读时都不会改变它。
可选值是fallback的副本，但允许浏览器根据用户的网络速度决定是否启动 Web 字体下载。 在连接太弱的情况下，浏览器将不得不通过不发送任何下载网络字体的请求来限制请求并优先处理最需要的资源。
限制字体系列和变体
由于每个字体系列和变体都会影响页面重量，因此您的 Google 字体优化过程的一部分必须包括限制这两个元素。
大多数专家会建议您最多使用两种字体系列； 对于标题和内容。 这是合乎逻辑的，可以让您在利用网络字体改进设计的同时安全地玩游戏。
italic 、regular、 bold等多种变体的可用性并不一定意味着您可以“选择”将它们包含在您的下载中。 将您的下载减少到所需的确切变体，并避免包含太多。 下载完整的变体会很浪费，因为您只想使用其中的一个词。 这就是谷歌字体的下一个优化技巧派上用场的地方。
使用文本参数
text 参数是您需要了解的最佳 Google 字体优化技巧之一，令人惊讶的是，大多数开发人员并不使用它。 该参数允许您仅加载您需要的字符。
假设您希望在公司名称中仅使用两个字体字母，如下例所示。 我为字母 C 和 N 使用了不同的字体：
公司名称
您可以请求仅加载这两个字母，而不是整个字体。 字体 URL 将包含额外的参数，如下所示：
https://fonts.googleapis.com/css?family=Baloo+Chettan+2=CN
这种优化 Google 字体性能的方法非常有效，可以让您削减多达 90% 的字体粗细。
综上所述
谷歌字体优化是提高网站整体性能的关键策略。
除了良好的排版设计之外，可访问性和可读性始终是关注的主要因素。 上述提高字体性能的方法都集中在缩小字体重量、尽可能快地访问网络字体以及在用户网络不稳定时呈现有效的格式/替代方案。
如果您尝试过任何这些方法，以及本文未提及的任何网络字体优化过程，请告诉我们。