为什么字体图标比图像更快？

Question

我在这里读过文章、论坛帖子、答案，每个人都认为字体图标是一种方式，当涉及到加载时间和网站的速度。

我正要用FontAwesome来做几个图标，问题是字体本身的重量太大了(除非你需要什么，更别说25 of的CSS了)。

您将得到跨浏览器兼容的字体扩展列表，重705 up，！就为了在页面上使用几个小图标？

我在Photosohp上做了同样的图标，文件的总大小大约是28 is。是浏览器下载速度的20倍多！！，那么为什么大家都在谈论字体图标在图像或图像精灵上的速度呢？

Answer 1

是的字体比图像更快，因为在加载多个图像时需要多个http请求，但是对于可以从CDN服务器加载的字体，我们使用字体还有另一个原因，因为我们可以很容易地更改字体大小、颜色和尺寸。

请参考此链接为什么字体比图像更好

Answer 2

这里有几件事要回答。

首先，为什么人们谈论图标，嗯，它们是一些旧的新闻，但是为什么它们仍然被使用的原因，他们将包括：

• 浏览器向后兼容性
• 易用性(特别是与文字相一致)
• 成熟后，许多现有的图标集都预先打包在此格式中。

第二，关于大小问题，您可以定制图标字体，具体包括您需要的任何内容，请查看IcoMoon (假设您还没有使用诸如gulp /grunt这样的自动处理程序)。它将允许您构建/管理您的字体。

第三，我个人不再使用图标字体了，原因有两个：

1. 它们受到字体反混叠的影响。
2. 垂直对齐比较困难(因为它受直线高度等的影响)

相反，我使用SVG精灵，我也有一个巧妙的吞咽过程，可以让我在插画师中进行设计，并通过将它们保存在特定的目录中来创建sprites，当然，它也会优化/压缩它们。

如果你想弄清楚如何为自己做这件事，我建议你去看看：

https://github.com/sindresorhus/gulp-imagemin

https://github.com/w0rm/gulp-svgstore

Answer 3

对于页面的初始加载，可能会有更多的数据，但是字体往往会被缓存，因此后续加载或使用相同字体的其他页面的加载速度会更快。