Font Awesome 是一款广受欢迎的图标库，但其使用方式很容易导致性能不佳。通过子集选择 Font Awesome，我们可以移除字体文件中任何未使用的字形。这将减少网络传输的字节数，从而提高性能。
让我们一起在一个 Font Awesome 项目中进行字体子集选择，看看它能带来什么改变。在接下来的过程中，我假设您正在导入 Font Awesome 提供的 CSS 文件，并使用其网络字体来显示图标。
为了演示，我只有一个 HTML 文件，它导入 Font Awesome 的基本 CSS 文件。为了获得合理的图标样本，我已经列出了我在一个副项目中使用的每个图标。
以下是子集选择字体之前，我们的 HTML 文件在浏览器中的样子：
以下是 DevTool 的网络选项卡，显示加载的内容。
现在让我们看看我们的字体文件渲染所有这些内容需要多少字节。
我们想看看 Font Awesome 最直接、性能最差的使用方式是什么样的。换句话说，我们想要实现速度最慢、没有任何优化的方案。我正在导入 Font Awesome 提供的 all.min.css 文件。
如上所示，压缩后的文件大小为 33.4KB，这还不错。不幸的是，当我们查看 DevTool 的字体选项卡时，情况变得更糟了。
虽然字体文件对于浏览器来说，不像 JavaScript 那样是昂贵的资源，但它们仍然是浏览器需要下载的字节，仅仅是为了几个小图标。考虑到您的一些用户可能在移动设备上浏览您的网站，远离强大的或快速的互联网连接。
Font Awesome 的主样式表包含数千个图标的定义。但如果我们只需要几十个图标呢？我们肯定可以去除不需要的东西？
有很多工具可以分析您的代码，并从样式表中删除未使用的样式。我碰巧正在使用 PurifyCSS。虽然这个库不再积极维护，但其理念相同，最终，这不是我们正在寻找的解决方案。但让我们看看当我们将 CSS 修剪到仅包含所需内容时会发生什么，我们可以使用以下脚本实现：
<code>const purify = require("purify-css");
const content = ["./dist/**/*.js"]; // Vite 构建的内容
purify(content, ["./css/fontawesome/css/all.css"], {
minify: true,
output: "./css/fontawesome/css/font-awesome-minimal-build.css"
});</code>当我们加载新构建的 CSS 文件时，我们通过网络传输的 CSS 字节数量大幅下降，从 33KB 降至 7.1KB！
但不幸的是，我们的其他 Font Awesome 字体文件没有改变。
发生了什么？PurifyCSS 完成了它的工作。它确实删除了所有未使用的图标的 CSS 规则。不幸的是，它无法进入实际的字体文件来修剪字形，以及 CSS 规则。
如果有一个像 PurifyCSS 这样的工具可以处理字体文件就好了……
当然，有一些工具能够从字体文件中删除未使用的内容，它们被称为子集选择工具。子集选择工具分析您的网页，查看您的字体文件，并修剪未使用的字符。有很多子集选择字体的工具，例如 Zach Leatherman 的 Glyphhanger。事实证明，子集选择 Font Awesome 非常简单，因为它自带内置的子集选择工具。让我们来看看。
我即将展示的自动子集选择和手动子集选择工具需要付费的 Font Awesome Pro 订阅。
Font Awesome 允许您设置所谓的工具包，在 Font Awesome 文档中将其描述为“一个背包，可以轻松地将您需要的所有图标和精彩内容放在一个简洁轻便的小包中，方便您轻松地将其添加到项目中”。因此，与其导入任何和所有 CSS 文件，工具包为您提供一个可以添加到 HTML 文件的
的单个脚本标签，从那里，工具包只从字体文件中发送您实际需要的字体字形。创建工具包大约需要一分钟。您将获得一个类似于这样的脚本标签：
<code></code>
当脚本加载时，我们现在根本没有 CSS 文件，而 JavaScript 文件只有 4KB。让我们再次查看 DevTools 字体选项卡，看看在我们进行了一些子集选择之后加载了哪些字体文件。
我们已经从 757KB 降到了 331KB。减少了 50% 以上。但我们仍然可以做得更好，特别是如果我们只渲染 54 个图标的话。这就是 Font Awesome 的手动字体子集选择工具发挥作用的地方。
如果 Font Awesome 为我们提供了一个工具，让我们可以选择我们想要的精确图标，然后为它提供自定义构建，那不是很棒吗？是的，他们做到了。由于某种原因，他们没有大肆宣传这一点，但他们实际上确实有一个专门用于手动子集选择字体的桌面应用程序。该应用程序可以从他们的网站下载——但是，与自动子集选择工具一样，此应用程序需要付费的 Font Awesome 订阅才能实际使用。
搜索图标，选择系列，添加您想要的内容，然后单击大的蓝色构建按钮。这实际上是生成 Font Awesome 图标的自定义子集所需做的全部工作。
单击按钮后，Font Awesome 将询问它应该将自定义构建保存到哪里，然后它会转储一个包含您需要的所有内容的 ZIP 文件。事实上，您将获得的结构与普通的 Font Awesome 下载完全相同，这使得事情特别简单。当然，它允许您将自定义构建保存为项目文件，以便您可以稍后重新打开它以根据需要添加或删除图标。
我们将打开 DevTools 查看我们正在加载的图标的最终大小，但首先，让我们看看实际的字体文件本身。自定义构建会创建许多不同类型，具体取决于您的浏览器使用什么。让我们关注 .woff2 文件，这是 Chrome 加载的文件。之前存在的相同 light、regular、duotone、solid 和 brand 文件仍然存在，只是这次没有一个文件大于 5KB……而且这是在它们被 gzip 压缩之前！
CSS 文件怎么样？它缩小到只有 8KB。使用 gzip 压缩后，它只有 2KB！
以下是 DevTools 中的最终统计数据：
在我们离开之前，如果您想知道该桌面字体子集 GUI 工具是否有一个可以与 CI/CD 集成以在构建时生成这些文件的 CLI，答案是……还没有。我给 Font Awesome 的工作人员发了电子邮件，他们说正在计划中。如果它发布，这将允许用户简化他们的构建过程。
如您所见，使用 Font Awesome 等工具来显示图标非常酷。但是默认的使用方式并不总是对您的项目来说是最佳方法。为了获得尽可能小的文件大小，子集选择字体是我们能够做的事情，以修剪我们不需要的内容，并且只提供我们所需的内容。这就是我们想要的性能，尤其是在加载字体方面，传统上很难处理。
以上是子集字体很棒以提高性能的详细内容。更多信息请关注PHP中文网其他相关文章！
