一.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相比足够好了
