字体图标vs png图标

Question

我使用图标标签,但我看到这个网站: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吗？

Answer 1

好问题.我目前正在试验Fontello和字体图标,看看它是否是一种可行的方法.

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

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

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

注意事项

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

与使用精灵或为每个图标创建PNG/SVG相比,这些考虑因素可能更少.

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

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

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