刚接触font icon,所了解得不深，仅仅作学习笔记。

个人理解的font icon是以字体文件取代图片文件，来代替小图标。

好处是能基本兼容所有的主流浏览器，不再为IE6不兼容半透明图片而烦恼。并且因为是字体，所以在移动开发当中拉伸和缩放中都不会影响icon的质量。

凡事有弊有利，font icon因为是文字，所以暂时只能是单一地填充颜色，这种情况随着这种技术的应用越来越广泛或许会有改观。

 

工具：

把矢量图用AI或者psd导出svg或者eps，利用FontLab生成各种格式的字体文件。在此推荐线上字体制作平台：

 

前端应用：

必须先用@font-face声明字体：

@font-face {
   font-family: 'icomoon';　　src: url('fonts/icomoon.eot'); /* IE9*/　　src: url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */　　url('fonts/icomoon.woff') format('woff'), /* chrome、firefox */　　url('fonts/icomoon.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/　　url('fonts/icomoon.svg#svgFontName') format('svg'); /* iOS 4.1- */　　font-weight: normal;　　font-style: normal;}

很多浏览器不会跟进文件的后缀名去自动识别字体格式，所以，format帮助浏览器识别字体格式，不能识别的时候加上#号后面是文件的备用名称。

 

定义使用fonticon的样式:

[class^="icon-"], [class*=" icon-"] {
   　　font-family: 'icomoon';　　speak: none;　　font-style: normal;　　font-weight: normal;　　font-variant: normal;　　text-transform: none;　　line-height: 1;　　-webkit-font-smoothing: antialiased;/*设置字体的抗锯齿或者说光滑度的属性*/　　-moz-osx-font-smoothing: grayscale;}

 

利用CSS3伪元素插入对应的字符编码：

1  .icon-icons:before {2 3 　　content: "\e602";4 }

 

最后应用到页面中：

1 
     
      
     

 

但有时候需要在html直接插入，所以就需要把生成的字符编码\转换成&#x。例如：\e602 转换成  即可使用：

     
      
     

 

可是，IE9以下版本并不兼容CSS3伪元素，所以并不能通过base64置于样式当中。所以，在此推介阿里的字体制作平台：，实现过程，在此略过。

个人认为，如果不是移动开发，或者需要兼容低版本浏览器的开发过程中不推荐使用font icon这种技术，因为即使能在浏览器中能显示图像，但并不能展示font icon最强大的一面。