我应该使用字体图标或精灵图像？

Question

我应该使用字体图标或精灵图片以获得更好的性能？什么会 加载速度更快，重量更轻？

Answer 1

我觉得图标字体有两个关键点：

• 整体文件大小
• Internet Explorer支持

当您有一组要在给定项目中使用的图标时，图标集越大，图标字体的整体文件占用量就越小。

谈到表演，在最近的测试中我使用一组约30个图标，与精灵图像相比，图标字体可以达到约240％的提升。 此外，图标字体可以追溯到IE6。

另一方面，矢量图标可上下调整而不会降低质量，视网膜显示屏上的额外锐利。它还可以支持多色图标。

我建议this张贴以供进​​一步参考。

希望这可以提供帮助， 升。

Answer 2

当你有很多小的单独图像时，你使用字体图标或精灵图像，你基本上将它们捆绑成一个图像，这样就可以完成一个请求来获取所有图像。

通常用于按钮的小图标或导航栏中的图标以及类似的东西。例如，顶部的StackOverflow编辑器按钮（粗体，斜体等）可能使用字体图像：

想象一下，你不得不为那个按钮栏加载10个不同图像的东西，效率非常低。

另一个例子是表情符号。有成千上万的表情符号，想象一下你是否必须在一个单独的请求中加载它们中的每一个。

目前，在现代网站中，通常使用字体图标比精灵图像更多。

这也减少了服务器负载。这一切都是出于提高效率的目的，因为我们有时使用小图像代表按钮而不是文字。