CSS Image Sprites与社交图标的UI字体 – 从页面加载速度的角度来看

这两种技术中的一种在页面加载速度方面具有轻微的“优越性能”,但大多数时候项目要求和开发时间远比加载速度重要.

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

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

CSS的数量：或多或少相同. @ font-face是更多的初始代码,但更少应用图标.

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

渲染速度：可忽略不计.

缓存：可忽略不计.图标字体有CDN.

我认为这两种技术的得分相同.差异可以忽略不计.当然,一个会比另一个略快.但你应该在你的具体情况下衡量.无论如何,我们知道多个请求是瓶颈.字体和精灵只需要一个请求.

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

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

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

渲染：图像精灵渲染像素完美.字体由渲染引擎应用,导致每个平台的差异. Windows使用内置的提示说明.创造良好的暗示需要很多技巧.

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

可维护性：图标需要大一个像素.这种更改使您生成精灵并更新CSs.使用字体更改只需一个字体大小值即可完成工作.

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

回到你的问题.您想在单个图像中使用多种颜色吗？比图像精灵是要走的路.我会将每个图标包含为单独的Base64图像.它使维护变得容易.虽然这将付出代价：非常粗略,Base64编码的二进制数据的最终大小等于原始数据大小814字节的1.37倍(对于标题).

我很好奇你的考虑因素.期待您的评论！