Question

我在这里遇到了一些问题。我的目的是节省HTTP请求，这会随着请求数量的增加自然减慢页面加载速度。我的第一个解决方案是去精灵。但是，我无法正确缩放具有相对单位的精灵，因为它会导致一个图像的一部分出现在另一个图像上。然后我研究了数据URI。这似乎很有希望，直到我读到不同的浏览器有（非常）不同的大小限制，范围从几KB到几MB。

此刻，我陷入了这种情况，我不能选择任何东西，只能采用旧的<img src="image.png">方法。

问题1：是否有替代sprite和URI可以达到类似的目标，即减少请求和加快加载时间？

问题2：由于最大URI大小不同，是否有一些地方我可以找出哪些浏览器支持哪些大小？就个人而言，我并不关心任何过时的浏览器都不能使用CSS3和HTML5，所以如果有人对此有所了解，这将是一个更大的帮助。

Answer 1

您可以使用CSS3 @font-face规则来定义您创建自己的字体所需的图标集，您可以使用http://icomoon.io/准备好一套图标，如果您想要自己的图标，则可以创建Vector你使用插图画家或工具你的图像（SVG）并导入icomoon创建自己的字体和保存服务器请求。

注意：需要添加所有类型的字体（例如ttf。woff，svg），因为缺少浏览器支持浏览器选择支持的字体

CSS嵌入已创建的字体：

@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);/*need to add multiple*/
}

数据URI或sprite的替代方案？

1 个答案: