Icon Font

1. Icon Font
赵磊

2. 概述
1、什么是Icon Font？它能干什么？
2、Icon Font有什么优缺点？
3、如何制作Icon Font？
4、如何使用Icon Font？

3. 什么是Icon Font？
我们现在通常所指的Icon Font，是用字体文
件取代图片文件，来展示图标、特殊字体
等元素的方法

4. Icon Font能干什么？

5. Icon Font优点
1、体积要比图片小的多
2、可维护性更好，拉伸不变形，颜色可以自
行更换，支持CSS3对文字的效果（阴影等）
3、可以实现通过base64置于CSS内，没有了
http请求

6. Icon Font缺点
1、只能纯色图标，多颜色不支持（WIN8上
面纯色图标更出色）
2、重构成本相应增高

7. 如何制作Icon Font
工具：FontCreator，PS
步骤：设计给出矢量Icon >> PS中栅格化图层
（不栅格个别图片会出问题）>> 保存为
PNG24 >>在FontCreator中importimage导入
（需要调整字体参数）>>都做完的字体文件
通过在线网站转换成多种格式
http://www.fontsquirrel.com/fontface/generator

8. 如何使用Icon Font
1、声明
2、通过在html中打入代码，或者在css中通过
before或after伪类中content控制（各有利弊）
3、应该建立一个公共页面，方便后期维护和
调用，包括输入的字符，图标含义等

9. Thank You~~~