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

我应该使用字体图标或精灵图像来获得更好的性能？什么将加载更快，重量轻？我应该使用字体图标还是精灵图像？

您使用的字体图标或精灵图像时，你有很多的小的独立的图像，你基本上他们捆绑成一个图像，这样一个请求做是为了让所有的图像。

那些通常被用于小图标的按钮，或者在导航栏的图标，以及类似的东西。有关顶部（粗体，斜体等），例如StackOverflow上的编辑按钮可能会使用到的字体图像为：

试想一下，你不得不加载像10个不同的图像只是该案件按钮栏，这将是非常低效的。

另一个例子是emojies。有数以千计的表情符号，想象一下，如果你必须在单独的请求中加载它们中的每一个。

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

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

2017-07-08 13:23:08 OverCoder

感谢您宝贵的评论，这是真正有用的。但遗憾的是，现在我无法对您的评论投票，因为我没有那么多的声誉。 –

@AnupMishra没关系:) – OverCoder

干得好。很多细节+一个很好的解释！我会为此赞成你。 –

有两个关键点，我觉得图标字体可以有一个优势：

当你有一组图标，你” d喜欢在给定的项目上使用，图标集合越大，图标字体的整体文件占用空间就越小。

谈起演出，最近的一次测试中，我一组约30图标制作的过程中，图标字体可以比精灵图像达到约240％的推动。另外，图标字体的工作时间可以追溯到IE6。

在另一方面，矢量图标可以调整大小上下而不失品位，对视网膜显示额外的锐利。它也可以支持多色图标。

我建议this后任何进一步的参考。

希望这可以帮助， L.

2017-07-08 13:32:57

雪碧图像不是明确的矢量。你从哪里得到那个'240％'百分比 – OverCoder

这是事实，精灵没有明确的向导。在最近的一个项目中，我使用IcoMoon工具生成了29个图标的图标字体。该工具允许导出与SVG sprite相同的设置。图标字体是7kb SVG精灵是17kb 这是性能增加约240％ –

是的，但基本上你可以得到更低或更高的收益，取决于许多因素，也许你应该说你得到了'240％在你的测试**中的文件大小改进**。许多人可以开始将其作为一般性措施。另外我也不知道较老的IE不支持精灵图像，今天我才知道。 – OverCoder

回答