html – 字体图标vs png图标_html-js-css

概述我使用标签的图标,但我看到这个网站：www.fontello.com,您可以用图标创建字体. 但是当我创建带有图标的字体时,它比我所有的图标都要大,因为有svg,ttf,woff和eot,所有这4个字体的所有png图标都比较大. @font-face { font-family: 'fonticons'; src: url("../font/fonticons.eot"); src: 我使用标签的图标,但我看到这个网站：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效果,如评论中所指出的.