我使用图标标签,但我看到这个网站: www.fontello.com
在这里您可以用图标创建字体。
但是当我的图标创建字体,它比我的所有图标更大,becouse有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,但你可以使用任何你想要的工具。
字体图标可以缩放到任何任何(相称)的尺寸是期望的和在任何像素密度工作。 如果你看看你的网站的高密度显示屏(如苹果的Retina,并在所有的移动设备越来越普及)上有个光栅格式(如PNG)和矢量格式之间有着巨大的区别。
您可以在一个单一的文件(如精灵)定义的所有图标,但不像一个精灵,你不必担心文件中的内容的尺寸。 此外,还可以缩放每个项目独立的文件中的其他项目。
注意事项
- 您将需要管理的字体文件。 这些都不是人类可读的,所以你需要使用的工具。
- 有相关CSS选择器来维持(每个图标通常一个选择)。
- 偶尔需要额外的标记,以取得特殊效果/解决问题。
- 次要上浆问题; 并非所有的图标填充盒均匀,他们都受到了文本渲染每个浏览器的特质。
这些考虑可能比使用精灵或创建的每个图标都PNG图像/ SVGs工作量少。
请记住,字体图标不包含任何颜色信息。 但是,你可以使用任何其他文本样式。 这包括使用ARGB颜色和应用在评论中指出更先进的CSS效果。
至于文件的大小,请记住,浏览器几乎不会下载所有4种字体格式。 做得正确,通常只有一个将被下载。
另一种方法是使用图标SVGs(未SVG字体)。 对于SVGs浏览器支持小于的@font-face
,所以你需要一个备用光栅。
这个方便的网站显示你的CSS功能是通过其浏览器的支持。 在这种情况下<IE9可以给你的问题。
http://caniuse.com/#feat=fontface
就个人而言,我更喜欢使用CSS精灵为我的UI元素,以确保acroass浏览器的一致性。
快声明:我一直对所谓的图标字体库pictonic 。
当我创建一个图标,字体,它比我的所有图标更大,因为SVG,TTF,WOFF和EOT,所有4种字体更大,所有的PNG图标。
在文件大小方面,你可能会VS图标字体有趣的发现png格式的比较如下:
http://blog.pictonic.co/post/32260064131/icon-fonts-could-speed-up-your-page-loading-time-by-14
您应该验证图标使用跟踪被转换成矢量格式。 因为许多矢量格式如SVG还支持位图,如果你的图标将被导入为位图,你会不会遇到任何的他们转换成矢量字体的文件大小有关的好处。
在我的经验,即使在16x16px中,TTF字库应该比20个左右图标合并文件大小要小得多。 随着图像尺寸增加该间隙变宽载体具有在每一个尺度相同的文件大小。
是否所有的浏览器这项工作?
要看你用什么方法。 pictonic是在所有的浏览器测试回IE5,但需要一点点JS旧版本的IE(5-7)的。 所以理论上它可能获得图标字体在所有浏览器的工作。
所以我为什么要使用这种字体的方法?
图标字体是真正的多功能,你可以以多种方式让图像图标显得相当不灵活的CSS操纵它们。 这里是一个演示: https://pictonic.co/#main-demo
因此,例如,你可以用你的布局实验,并改变颜色,大小,和你所有的图标影线的短短几行的CSS。 这是非常方便的。
同时,因为它们是基于矢量,它们是视网膜准备开箱即用,所以他们看起来惊人的视网膜屏幕,比如那些在苹果Retina显示屏(视网膜的MacBook,iPhone 4+,iPad3的+),而图像需要媒体查询双交换它占用更多的空间分辨率的版本。
我相信他们很有效的,如果你使用正确的格式。
而对于fontello.com任何替代?
pictonic没有导入用户生成的图标还的能力,但它允许您从超过2000惊人的图标,包括一个相当大的免费图标集生成自定义图标字体。 我们一直在不断增加更多,所以做看看
另一种方法你可能是: http://fontastic.me/
;)