5

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

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

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

有人对此有见识吗？

4

3 回答 3

4

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

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

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

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

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

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

缓存：可以忽略不计。有图标字体的 CDN。

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

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

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

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

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

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

可维护性：图标需要大一像素。这种更改使您生成精灵并更新 CSS。更改字体时，只需更改一个 font-size 值即可完成工作。

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

回到你的问题。您想在单个图像中使用多种颜色吗？比图像精灵是要走的路。我会将每个图标包含为单独的 Base64 图像。它使维护变得容易。尽管这是有代价的：非常粗略地说，Base64 编码的二进制数据的最终大小等于原始数据大小的 1.37 倍 + 814 字节（对于标头）。

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

于 2014-01-03T15:51:40.363 回答
0

1) 图标字体字形将比图像精灵渲染得更快。

k2)如果您使用Fontello（免费且易于使用）创建仅包含您将在您的应用程序/网站中使用的字形的自定义字体，则图标字体的大小也可以小于类似的精灵表。

例如，对于最近的一个项目，我创建了一个包含 8 个字形的 TrueType 字体，重量小于 8kb，并且图标可以漂亮地向上或向下缩放；尖锐而清晰。

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

于 2015-05-15T01:22:18.470 回答
-1

Css sprite 确实改善了加载时间，但随着互联网的速度，普通观众甚至不会注意到差异。该网站对它们是什么以及它们的作用、比较等进行了完整的细分。http://css-tricks.com/css-sprites/

希望这可以帮助 ：）

于 2013-12-31T00:37:24.073 回答