html – 字体图标vs png图标

我使用标签的图标,但我看到这个网站：www.fontello.com,您可以用图标创建字体.

但是当我创建带有图标的字体时,它比我所有的图标都要大,因为有svg,ttf,woff和eot,所有这4个字体的所有png图标都比较大.

@font-face {
  font-family: 'fonticons';
  src: url("../font/fonticons.eot");
  src: url("../font/fonticons.eot?#iefix") format('embedded-opentype'),url("../font/fonticons.woff") format('woff'),url("../font/fonticons.ttf") format('truetype'),url("../font/fonticons.svg#fonticons") format('svg');
  font-weight: normal;
  font-style: normal;
}

我所有的图标都是optipng压缩的.png图像.

这是否适用于所有浏览器？

那我为什么要用这种字体呢？

和fontello.com的任何替代品？

解决方法

好问题.我正在尝试Fontello和字体图标,看看它是否可行.

这是一个可行的方法.我已经在生产应用程序中使用基于字体的图标,并在几乎每个受欢迎的浏览器/设备上进行测试(Fontello有甚至支持IE7的示例).我对Fontello只有很好的说法,但是你可以使用任何你想要的工具.

字体图标可以缩放到所需的任何(适当的)尺寸,并适用于任何像素密度.如果您在高密度显示器(如Apple Retina)上观看您的网站,并且在所有移动设备上越来越受欢迎,则栅格格式(如PNG)和矢量格式之间存在巨大差异.

您可以在单个文件(如精灵)中定义所有图标,但与sprite不同,您不必担心文件中项目的尺寸.此外,您可以缩放文件中与其他项目无关的每个项目.

注意事项

>您将需要管理字体文件.这些不是人类可读的,所以你需要使用一个工具.
>有相关的CSS选择器要维护(通常每个图标一个选择器).
>偶尔需要额外的标记来实现特定的效果/解决问题.
>小规模问题;并不是所有的图标均匀地填满一个框,并且它们受到每个浏览器的文本呈现特性的影响.

这些考虑可能比使用精灵或为每个图标创建PNG / SVGs的工作少.

请记住,字体图标不包含任何颜色信息.但是,您可以像任何其他文字一样进行风格化.这包括使用ARGB颜色和应用更高级的CSS效果,如评论中所指出的.

关于文件大小,请记住,浏览器几乎不会下载所有4种字体格式.完成正常,通常只有一个将被下载.

另一种方法是使用SVG(而不是SVG字体)作为图标. SVG的浏览器支持小于@ font-face的支持,因此您将需要光栅后备.