Font Icon 实践

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

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

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

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

 

工具：

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

 

前端应用：

必须先用@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伪元素插入对应的字符编码：

 .icon-icons:before {

　　content: "\e602";
}

 

最后应用到页面中：

<div><span class="icon-icons"></span></div>

 

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

<div><span class="icon-">&#xe602;</span></div>

 

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

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