我应该如何使用字体真棒图标来获得我网站的最高性能？

Question

我在我的网络应用程序上使用字体很棒。 虽然我在其中一个页面中只使用了一个图标，但会下载所有字体，这会增加页面加载时间。 正如您在图像（第二个字体文件）中看到的那样，它是80KB并且需要3S才能加载。

有没有办法减少文件大小和加载时间？

将其子集化是一个好主意吗？

如何使用SVG？

Answer 1

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

如果您在页面中重复了很多图标，那么为了渲染时间，就像在表格中一样，您可以使用什么字体真棒调用符号。

<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