CSS图像精灵与社交图标的UI字体-从页面加载速度的角度

Question

我很好奇对我的社交媒体图标使用CSS图像精灵与使用自定义UI字体的优缺点。

哪一个会在页面加载速度方面提供卓越的性能？

在我看来，CSS sprite可能更好-因为只有一个HTTP请求-文件大小可能比社交图标的自定义UI字体更小。

有人对此有什么见解吗？

Answer 1

这两种技术中的一种在页面加载速度方面略有优势，但在大多数情况下，项目需求和开发时间远比加载速度重要。

图像精灵vs图标字体和页面加载速度

请求数：这两种技术都需要CSS并加载一个文件。您需要生成多个字体，但只请求和使用了一种字体。

CSS的数量：大致相同。@font-face是更多的初始代码，但较少应用图标。

文件大小：大致相同，但取决于图标大小。更大的图标需要更大的图像精灵。字体使用矢量，大小保持不变。我查找了一个有300个字形的字体，它是25KB的WOFF ( SVG的大小是它的两倍)。包含一个字形的字体是4KB。为了比较两者，我应该在精灵中将所有的字形渲染成透明的黑色。但是图标大小是多少呢？

渲染速度：可以忽略不计。

缓存:可以忽略。有用于图标字体的CDN。

我认为这两种技术得分是一样的。这些差异可以忽略不计。当然，其中一个会比另一个稍微快一些。但您应该在您的特定情况下衡量这一点。无论如何，我们知道多个请求是瓶颈。而且字体和精灵都只需要一个请求。

图片精灵vs图标字体和重要的东西！

颜色：精灵可以在相同的图标中使用所有的RGBA颜色。字体只有一种颜色。您可以应用效果使字体更加特殊(这些效果将在其他页面元素上匹配相同的效果)。

图像形状/大小:如果您想要应用不同大小的图标(例如高分辨率显示)，图像精灵需要重复的图标。字体可以应用于任何大小。

渲染：图像精灵完美地渲染像素。字体由渲染引擎应用，导致每个平台的差异。Windows使用内置的提示指令。创建好的提示需要很高的技巧。

使用区域：图像精灵也可以被其他页面元素(背景)使用。由于字体是作为文本应用的，因此它们的使用区域较小。

Maintainability:图标需要大一个像素。这种更改使您可以生成子画面并更新CSS。更改字体时，只需更改一个字体大小值即可完成工作。

开发时间:在创建自己的图标时，以上几点是重要的设计决策。也就是说，大多数开发人员只使用他们觉得舒服的技术。或者选择一种可能的精灵或字体。

回到你的问题上。是否要在单个图像中使用多种颜色？而不是一个图像精灵。我会包括每个图标作为单独的Base64图像。它使维护变得容易。尽管这是有代价的:非常粗略地说，Base64编码的二进制数据的最终大小等于原始数据大小的1.37倍+ 814字节(对于报头)。

我很好奇你的考虑是什么。期待您的评论！

Answer 2

1)图标字体字形的渲染速度将快于图像精灵。

2)如果您使用k (免费且易于使用)创建仅包含您将在您的应用程序/站点中使用的字形的自定义字体，则图标字体在大小上也可以小于可比的sprite sheet。

例如，在最近的一个项目中，我创建了一个包含8个字形的TrueType字体，重量小于8kb，图标放大或缩小得非常漂亮；清晰清晰。

轻松应用颜色，尝试80%的不透明度等。

Answer 3

Css精灵确实在加载时间上有所改进，但随着互联网的速度，普通观众甚至永远不会注意到差异。这个网站有他们是什么，他们做了什么，比较和更多的完整分类。http://css-tricks.com/css-sprites/

希望这能有所帮助:)