<分区>
我在这里遇到了一个第 22 条军规。我的意图是节省 HTTP 请求，随着请求数量的增加，这自然会减慢页面加载速度。我的第一个解决方案是使用 Sprite 。但是，我无法正确缩放具有相对单位的 Sprite ，因为它会导致一幅图像的一部分出现在另一幅图像上。然后我查看了数据 URI。这看起来很有希望，直到我了解到不同的浏览器有(非常)不同的大小限制，范围从几 KB 到几 MB。
此刻，我陷入了这种情况，除了选择旧的<img src="image.png">，我别无选择。方法。
那么问题 1:是否有替代 sprite 和 URI 的方法可以实现减少请求和加快加载时间的类似目标？
问题 2:由于 URI 的最大大小各不相同，有什么地方可以让我找出哪些浏览器支持哪些大小？就个人而言，我不喜欢任何过时到无法使用 CSS3 和 HTML5 的浏览器，因此如果有人对此有所了解，那将是一个更大的帮助。
最佳答案
您可以使用 CSS3 @font-face 规则来定义您的图标集，您只需创建自己的字体即可使用 http://icomoon.io/对于现成的图标集，如果您想要自己的图标，请使用您擅长的插画或工具创建图像矢量 (SVG)，然后导入到 icomoon创建自己的字体并保存服务器请求。
注意:由于缺乏浏览器支持，需要添加所有类型的字体(例如ttf.woff、svg)浏览器选择支持的字体
嵌入创建字体的 CSS:
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);/*need to add multiple*/
}
关于html - 替代数据 URI 或 Sprite ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21939315/