最近看了一些有关字体图标方面的文章，分享一下自己最近学到的东东，在不少的网站中，有很多小的纯色图标，都应用到了字体图标，使用图标字体能我们带来了一定的方便

    字体图标的优势：

    1、字体图标比位图清晰且轻量：一个图标字体比一系列的图像（特别是在Retina屏中使用双倍图像）要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。

    2、字体图标灵活：图标字体可以用过font-size属性设置其任何大小，还可以加各种文字效果，包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话，必须得为每个不同大小和不同效果的图像输出一个不同文件。

    3、字体图标兼容：网页字体支持所有现代浏览器，包括IE低版本

    除了以上优势之外，当然也有劣势

    1、图标字体只能被渲染成单色或者CSS3的渐变色，由于此限制使得它不能广泛使用。

    2、使用版权上有限制，有好多字体是收费的。当然也有很多免费开源的精美字体图标供下载使用。

    3、创作自已的字体图标很费时间

    字体图标试用：

    第一步：使用font-face声明字体

@font-face {font-family: 'iconfont';

    src: url('iconfont.eot'); /* IE9*/

    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

    url('iconfont.woff') format('woff'), /* chrome、firefox */

    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/

    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */

}

    第二步：定义使用iconfont的样式

.iconfont{

    font-family:"iconfont" !important;

    font-size:16px;font-style:normal;

    -webkit-font-smoothing: antialiased; /*字体图标出现锯齿的问题*/

    -webkit-text-stroke-width: 0.2px;

    -moz-osx-font-smoothing: grayscale; /*字体图标出现锯齿的问题*/}

    第三步：挑选相应图标并获取字体编码，应用于页面

3

 阿里巴巴矢量图标库介绍了很详细的字体图标使用和字体库的下载，使用起来很方便，不过要制作自己的字体图标很费时间

其他参考文章    

点击这里下载例子：/Upload/History/Dtop/UploadFiles/upload/201503301117216120.rar