css - 我应该如何使用 Font Awesome 图标来为我的网站提供最高性能？

Question

我在我的 Web 应用程序中使用了很棒的字体。虽然我在一个页面中只使用一个图标，但所有字体都会被下载，这会增加页面加载时间。正如您在图片(第二个字体文件)中看到的那样，它有 80KB 并且需要 3 秒才能加载。

有什么办法可以减少文件大小和加载时间吗？

子集化是个好主意吗？

使用 SVG 怎么样？

Answer 1

您可以按照加载时间的建议使用 icomoon。

对于渲染时间，如果您的图标在页面中重复很多，例如在表格中，您可以使用 awesome 称为符号的字体。

<i class="fas fa-edit" data-fa-symbol="edit"></i>
<i class="fas fa-trash" data-fa-symbol="delete"></i>

<div>
  <svg class="svg-inline--fa fa-w-20"><use xlink:href="#edit"></use></svg>
  <svg class="svg-inline--fa fa-w-20"><use xlink:href="#edit"></use></svg>
  <svg class="svg-inline--fa fa-w-20"><use xlink:href="#edit"></use></svg>
  <svg class="svg-inline--fa fa-w-20"><use xlink:href="#delete"></use></svg>
  <svg class="svg-inline--fa fa-w-20"><use xlink:href="#delete"></use></svg>
  <svg class="svg-inline--fa fa-w-20"><use xlink:href="#delete"></use></svg>
</div>

source