用字体在网页中画 ICON 图标

适当的图标，可以达到一图胜千言的效果。

CSS Sprite

实现技术：background-position , background-images;

使用原理：

1、使用backgrou-position定位，background-images导入图片；
2、以整张图片的左上角为坐标原点，向右，向下区负值，即位于坐标的第四象限;

特点：

1、相对于单个小图标节省文件体积和减少服务器请求次数；
2、一般情况下，保存为PNG-24位文件格式；
3、可以设计出丰富多彩的icon；

难点：

1、需要预先确定每个图标的大小；
2、注意小图标和小图标之间的距离；
3、细心+耐心；

字体图标

优点：

1、灵活性：轻松地改变图标的颜色或其他CSS效果;
2、可扩展:改变图标的大小，就像改变字体大小一样容易;
3、矢量性：图标是矢量的，与像素无关。缩放图标不会影响清晰度;
4、兼容性：字体图标支持所有现代浏览器（包括IE6）;
5、本地使用：通过添加定制字体到您的本地系统，你可以在各种不同的设计和编辑应用程序中使用它们;

图标推荐网站：https://icomoon.io

图标变成字体简介网站: http://www.w3cplus.com/css3/how-to-turn-your-icons-into-a-web-font.html

字体文件格式：

1、EOT：微软开发，ie专用字体；
2、WOFF：W3C推荐；
3、TTF：操作系统常用字体；
4、SVG：W3C定制的开放标准的图形格式；

代码示例：

@font-face{
    font-family: "imooc-icon";
    src: url("../fonts/icomoon.eot"); /* IE9 兼容模式 */
    src: url("../fonts/icomoon.eot?#iefix") format("embedded-opentype")
    ,url("../fonts/icomoon.woff") format("woff")
    ,url("../fonts/icomoon.ttf") format("truetype")
    ,url("../fonts/icomoon.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}
// 抗锯齿显示优化
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;