我很好奇为我的社交媒体图标使用 CSS 图像 Sprite 与使用自定义 UI 字体的优缺点。
哪一个将在页面加载速度方面提供卓越的性能？
在我看来，CSS Sprite 可能更好 - 因为只有一个 HTTP 请求，文件大小可能比社交图标的自定义 UI 字体更小。
有人对此有见解吗？
最佳答案
这两种技术中的一种会略微“在页面加载速度方面表现出色”，但大多数时候元素要求和开发时间远比加载速度重要。
图像 Sprite vs 图标字体 和页面加载速度
请求数:两种技术都需要 CSS 并加载一个文件。您需要生成多种字体，但只请求并使用了一种字体。
CSS 数量:大致相同。 @font-face 是更多的初始代码，但更少应用图标。
文件大小:大致相同，但取决于图标大小。更大的图标需要更大的图像 Sprite 。字体使用矢量并将保持相同的大小。我查了一个有 300 个字形的字体，它是一个 25KB 的 WOFF(SVG 是大小的两倍)。包含一个字形的字体为 4KB。为了比较这两者，我应该在 sprite 中将所有字形透明渲染为黑色。但是图标大小是多少？
渲染速度:可以忽略不计。
缓存:可以忽略不计。有图标字体的 CDN。
我认为这两种技术得分相同。差异可以忽略不计。当然，一个会比另一个稍微快一点。但是你应该根据你的具体情况来衡量。无论如何，我们知道多个请求是瓶颈。而且字体和 Sprite 都只需要一个请求。
Image sprite 与 Icon font 和重要的东西!
颜色: Sprite 可以在同一个图标中使用所有 RGBA 颜色。字体只有一种颜色。您可以应用效果使字体更加特殊(并且这些效果将与其他页面元素上的相同效果相匹配)。
形状/大小:如果您想应用不同大小的图标(例如高分辨率显示器)，图像 Sprite 需要重复的图标。可以应用任何大小的字体。
渲染:图像 Sprite 渲染像素完美。字体由渲染引擎应用，导致每个平台的差异。 Windows 使用内置的提示指令。创建好的提示需要很多技巧。
使用区域:图像 Sprite 也可以被其他页面元素(背景)使用。由于字体作为文本应用，因此它们的使用区域较小。
可维护性:图标需要大一个像素。这种变化使您生成 Sprite 并更新 CSS。通过更改字体，只需更改一个字体大小值即可完成工作。
开发时间:以上几点是创建您自己的图标时的重要设计决策。也就是说，大多数开发人员只是使用他们觉得舒服的技术。或者选择其中一种可能的 Sprite 或字体。
回到你的问题。您想在单个图像中使用多种颜色吗？比图像 Sprite 是要走的路。我会将每个图标作为单独的 Base64 图像包含在内。它使维护变得容易。尽管这是有代价的:非常粗略地说，Base64 编码的二进制数据的最终大小等于原始数据大小的 1.37 倍 + 814 字节(对于 header )。
我很好奇你的考虑是什么。期待您的评论!
关于社交图标的 CSS Image Sprites 与 UI 字体——从页面加载速度的 Angular 来看，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20849578/