“强大的力量来了。 。 ”。 ——嗯，你知道。
虽然 Cloudflare 继续对Cloudflare Fonts 进行 Beta 测试，但无论您以何种方式在网站上使用远程托管的可变字体，您都需要考虑一些事项。其中一些可变字体变化很大，因此您需要了解这如何影响性能。
首先：相信我，我完全支持可变字体，自从我知道它们的存在以来，我就一直在这个网站上使用它们。鉴于我倾向于在各种宽度和大小的地方使用粗体、斜体和粗斜体文本，可变字体对我来说几乎在所有可能的方面都击败了静态字体。
然而，“能力越大，责任越大”，这对于可变字体赋予您的力量来说也是如此。或者说，我在 Cloudflare Fonts beta 中“去谷歌搜索”某些可变 Google 字体时了解到。我测试的大多数字体仅提供不同的粗细。然而，有些提供这些以及更多。简而言之：启用的这些额外功能越多，生成的字体文件就越大；而且，即使您不启用它们，具有该功能的字体也会比不具有该功能的字体产生更大的下载量。
注意：请记住，您不想使用 Google提供的Google 字体。如果您无法（或选择不）通过 Cloudflare Fonts 访问它们，请将它们托管在本地。
以下是一些场景。截至本文最初发布之日，字体文件大小都是准确的。
作为比较， Libre Franklin可变字体是 Google 字体库中最简单的字体之一。它提供的只是从 100 到 900 的粗细范围。即使您为常规字体和斜体字体指定所有粗细，最终的下载也仅为 28 Kb（常规）和 32 Kb（斜体）。 1
但是，在光谱的另一端，有Roboto Serif可变字体。它不仅可以让您指定所有这些重量，还可以指定光学尺寸、宽度和等级。即使您只为 Roboto Serif 启用与 Libre Franklin 示例2中相同的可变权重，并且没有启用任何其他附加组件，您也会获得 65 Kb（罗马字体）和 71 Kb（斜体）的下载 — 每个都超过两倍大与更简单的 Libre Franklin 字体相对应。
开始打开更多的东西，那些 Roboto Serif 字体文件下载很快就会变得相当大。下面，对于每个描述，所描述的下载大小分别针对罗马字体和斜体字体。
- 为方便起见，在此重复：仅启用可变权重时，下载大小为 65 Kb 和 71 Kb。
- 由于重量和光学尺寸不同，下载大小分别为 147 Kb 和 170 Kb。
- 通过可变权重和光学尺寸以及75% 的固定宽度设置，下载量为 160 Kb 和 180 Kb。
通过可变的权重和光学尺寸以及从 50 到 150的可变宽度（后者可以通过CSS 的
font-stretch属性访问），下载量会增长到 380 Kb 和 440 Kb。事实上，即使您指定了固定宽度，但它不是Google 指定的宽度之一（50、62.5、75、87.5、100、112.5、125 和 150）（例如 70），下载量仍然是相同的尺寸。 - 而且，如果您启用整个shebang – 可变重量和光学尺寸以及可变宽度和可变等级，无论您谈论的是特定等级还是-50到100可接受范围内的任何范围 – 下载量都会增长到巨大的大小570 Kb和731 Kb 。 3仅两个字体文件就超过一兆字节。
最重要的是，如果使用具有附加功能的字体，您必须对它们进行试验，然后根据获得的数据，在成本与收益的基础上评估适合您网站的最佳策略。
这是一个例子。您的大部分受众可能会通过手机查看您的网站。尽管启用光学尺寸对于显示非常小的字体（例如脚注）特别有用，但由此产生的较大尺寸的字体下载对于连接不太好的手机来说是一个缺点。因此，解决这个问题的一种方法是仅向屏幕较大的设备提供网络字体，因为手机的系统字体通常是专门为减轻手机显示屏的特殊性而设计的。这是一个非常基本的 CSS 示例，说明如何使用前面提到的 Roboto Serif：
: root { --serif : ui-serif , serif ; } @ media screen and ( min-width : 640px ) { : root { --serif : "Roboto Serif" , ui-serif , serif ; } } html , body { font-family : var ( -- serif ); }
当然，如果您出于品牌目的或其他原因要求所有设备显示所需的字体选择，则这是不合适的。同样，您必须确定什么最适合您的网站。
我希望这些信息将有助于您了解远程托管字体的最佳使用方式（如果有）。
-
在我的测试中，我发现以这种方式而不是通过自托管使用 Libre Franklin 的一个好处是，由于 Google 的编码（在“去谷歌搜索”之前），您可以从全套文件中获得大致相同的文件大小。 ”由 Cloudflare Fonts 提供），而不是必须对本地托管的字体进行子集化来修剪它们。 ↩︎
-
碰巧 Libre Franklin 和 Roboto Serif 具有相同的粗细范围，即 100-900。并非所有 Google 字体产品（无论是可变字体还是其他字体）都是如此，因此您需要调查您感兴趣的特定字体的可用特征。 ↩︎
-
这是现实场景吗？不。关键是您需要通过增加网站的总下载大小来为这些附加功能付费。 ↩︎