html png图标使用,html – 字体图标vs png图标

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

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

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

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

注意事项

>您将需要管理字体文件.这些不是人类可读的,所以你需要使用一个工具.

>有相关的CSS选择器要维护(通常每个图标一个选择器).

>偶尔需要额外的标记来实现特定的效果/解决问题.

>小规模问题;并不是所有的图标均匀地填满一个框,并且它们受到每个浏览器的文本呈现特性的影响.

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

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

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

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