但是当我创建带有图标的字体时,它比我所有的图标都要大,因为有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有甚至支持IE7的示例).我对Fontello只有很好的说法,但是你可以使用任何你想要的工具.
字体图标可以缩放到所需的任何(适当的)尺寸,并适用于任何像素密度.如果您在高密度显示器(如Apple Retina)上观看您的网站,并且在所有移动设备上越来越受欢迎,则栅格格式(如PNG)和矢量格式之间存在巨大差异.
您可以在单个文件(如精灵)中定义所有图标,但与sprite不同,您不必担心文件中项目的尺寸.此外,您可以缩放文件中与其他项目无关的每个项目.
注意事项
>您将需要管理字体文件.这些不是人类可读的,所以你需要使用一个工具.
>有相关的CSS选择器要维护(通常每个图标一个选择器).
>偶尔需要额外的标记来实现特定的效果/解决问题.
>小规模问题;并不是所有的图标均匀地填满一个框,并且它们受到每个浏览器的文本呈现特性的影响.
这些考虑可能比使用精灵或为每个图标创建PNG / SVGs的工作少.
请记住,字体图标不包含任何颜色信息.但是,您可以像任何其他文字一样进行风格化.这包括使用ARGB颜色和应用更高级的CSS效果,如评论中所指出的.
关于文件大小,请记住,浏览器几乎不会下载所有4种字体格式.完成正常,通常只有一个将被下载.
另一种方法是使用SVG(而不是SVG字体)作为图标. SVG的浏览器支持小于@ font-face的支持,因此您将需要光栅后备.
