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

Question

我在这里阅读文章，论坛帖子和答案，每个人都建议字体图标是加载时间和网站速度的一种方式。

我准备使用FontAwesome作为几个图标，问题是字体本身的重量很大（更不用说25KB CSS，除非你拿走你需要的东西）。

您最终会获得重量为705KB 的跨浏览器兼容字体扩展名列表!!只是在页面上使用几个小图标？

我在Photosohp上做了相同的图标，总文件大小约为28KB。 浏览器下载的次数要小20倍!! 那么为什么每个人都在谈论字体图标在图像或图像精灵上的速度呢？

Answer 1

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

参考此链接 why Fonts better than images

Answer 2

这里有几件事要回答。

首先，为什么人们谈论iconfonts，他们有点旧的新闻，但至于他们仍然使用的原因，他们将包括：

• 浏览器向后兼容性
• 易于使用（特别是与文字内联）
• 成熟度，许多现有的图标集都以此形式预先打包

关于尺寸问题，您可以自定义图标字体以包含您需要的任何内容，请查看IcoMoon（假设您尚未使用gulp / grunt等自动化程序）。它将允许您构建/管理您的字体。

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

1. 受字体抗锯齿影响
2. 垂直对齐更困难（因为它受线高等影响）

相反，我使用SVG精灵，我也有一个漂亮的gulp过程，让我在illustrator中设计，并通过将它们保存在特定的目录中创建精灵，自然它也优化/压缩它们。

如果你想弄清楚如何为自己做这件事我建议退房：

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

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

Answer 3

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