一.iconfont的优缺点

优点

矢量性

屏幕适配(缩放)

字体性

样式控制(颜色，阴影，甚至浮雕)

文件小

一般20-50KB，比图片小很多，例如typicons库有308个icon，字体文件大小为59KB(woff) ~ 147KB(svg)

图标文件一般1.5KB/个(Sprite只会让总大小更大)

不需要Sprite，易于修改

省去了使用Sprite的麻烦，很容易修改更换

缺点

颜色限制

iconfont只能是纯色或者渐变色，复杂图标无法使用该技术(虽然也有方法可以实现多色iconfont，但兼容性，成本都无法接受)

FOUT(Flash of Unstyled Text)问题

浏览器先用默认字体渲染，待字体文件下载完毕后再对文字内容进行部分渲染，文字就会出现不可避免的闪烁

IE会阻塞页面渲染

如果在 @font-face 声明之前有script标签的话，IE将不会渲染任何东西，直到字体文件完成下载

性能

IE问题比较多，IE和FF下@fontface会阻塞window.onload，IE下用不用都会加载，字体加载出错(长时间未返回结果)时，IE会等待10分钟(期间白屏)，其它浏览器会用默认字体渲染或者暂时不显示内容，在等待下载期间忙指示器会一直被触发(状态栏、进度条、图标、鼠标指针)

二.制作生成

三.管理维护

四.字体格式与兼容性

字体格式

woff：W3C推荐格式，体积最小，兼容性差

Android4.4+，IE9+

ttf：Win和Mac默认字体格式

Android4.1+，IE9+部分支持

eot：微软提出的，允许@fontface嵌入OpenType字体

Android不支持，IOS不支持，IE不支持

svg：兼容性好，体积大

Android4.1+部分支持，IE9+

字体文件大小

20个icon，字体文件大小分别为：

woff：7K

ttf：11K

eot：11K

svg：14K

兼容性

IE：从IE4开始支持eot格式，IE9开始支持woff

webkit/safari：支持TrueType/OpenType(.ttf)，OpenType PS(.otf)，iOS4.2+支持.ttf，iOS 4.2以下只支持SVG字体， Safari5.1+ 开始支持woff格式

Chrome：除webkit支持的以外，从Chrome 6开始，开始支持woff格式

Firefox：支持.ttf和.otf，从Firefox 3.6开始支持woff格式

Opera：支持.ttf、.otf、.svg。 Opera 11开始支持woff

iPad, iPhone and Android 3.0+ 支持SVG fonts

此处与caniuse结论有差异

五.性能优化原则

将你的@font-face定义在所有的script标签前

如果你有许多字体文件，考虑将它们分散到几个域名下

不要包含没有使用的 @font-face声明——IE将不分它使用与否，通通加载

Gzip字体文件，同时给它们一个未来的过期头部声明

考虑字体文件的后加载(放在body结束标签前)，起码对于IE(IE留10分钟下载字体，在此期间，页面阻塞)

关于@fontface性能问题的详细信息请查看【翻译】@font-face与性能

六.注意事项

1.FF不加载异域字体

放到同域或设置服务器头

2.safair和chrome下字体被加粗

把半像素锯齿渲染成了1px，设置css规则：-webkit-font-smoothing: antialiased;

3.PC的Chrome下严重锯齿

对边缘模糊处理即可，设置css规则：-webkit-text-stroke-width: 0.2px;

七.结论

iconfont优点 > 缺点，复用性与维护性上的便利很诱人

生成字体库的主要工作量在于png转svg

如果UI肯配合就很容易了，而且字体库建好后对UI也有好处，做设计稿更方面，有PS插件可以直接使用iconfont，不用切出icon

(亲测不支持cc，cs6，对插件质量保持怀疑，如果插件不可用，UI设计稿图标与iconfont的对应是个小麻烦)

兼容性不是问题

4种格式都放上，兼容性足够了

性能不是很好

但和图片Sprite相比足够好了