iconfont的使用

什么是iconfont

iconfont是‘字体图标’，将图标以文字的方式显现的网页中。现在有很多网页已经使用过字体图标，如我们大家都熟知的淘宝、京东、新浪等大型网站都用到过字体图标。

iconfont使用方法

首先去该网址（http://www.iconfont.cn/）下载你想要的字体图标。获取.eot、.woff、.ttf、.svg和图标相关的字体编码。

获取到这些之后，第一步就是声明字体：

@font-face{
font-family:'iconfont'!important;
src:url('../font/iconfont.eot');/*兼容的浏览器IE9*/
src:url('../font/iconfont.eot#iefix') format('embedded-opentype'),/*IE6-IE8*/
url('../font/iconfont.woff') format('woff'),/*Chrome、Firefox*/
url('../font/iconfont.ttf') format('truetype'),/*Chrome、Firefox、opera、Safari, Android, iOS 4.2+*/
url('../font/iconfont.svg#iconfont') format('svg')/*iOS 4.1-*/
}

补：

由于网页中使用的字体类型，各个浏览器对于字体类型也是有不同的支持规格
        .eot----eot是嵌入式字体，是微软开发的技术，允许onetype字体用@font-face嵌入到网页。

.woff--woff(web开发字体格式)是一种专门为web而设计的字体格式标准，实际上是对truetype/onetype等字体格式的封装，每个字体文件中含有字体以及针对字体的元数据（Metadata），字体文件被压缩，以便于网络传输。

.ttf-----ttf(TrueTypeFont)是Apple公司和Microsoft公司共同推出的字体文件格式,随着windows的流行,已经变成最常用的一种字体文件表示方式。

.svg---svg是由W3C制定的开放标准的图形格式。svg字体就是使用svg技术来呈现字体，还有一种gzip压缩格式的svg字体。

第二步定义iconfont使用的样式

.iconfont{
font-family:"iconfont";/*声明字体类型为iconfont*/
font-size:42px;/*设置字体大小为42px*/
font-style:normal;/*设置字体样式为默认值。浏览器显示一个标准的字体样式。*/
-webkit-font-smoothing:antialiased;/*设置字体的光滑度属性，也就是CSS3用于webkit引擎(chrome)设置字体抗锯齿属性*/
-webkit-text-stroke-width:.2px;/*设置文字边框*/
-moz-osx-font-smoothing:grayscale；/*该属性是为了让字体显示的更清晰的作用*/
}

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



效果如下：

iconfont的好处

   1） 轻量性：一个字体图标比一系列的图像要小。一旦字体图标加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少http请求，还可以配合HTML5离线存储做性能优化。
      
   2） 灵活性：字体图标可以用font-size属性设置其大小，还可以加各种文字效果，包括颜色、hover状态、透明度等效果。

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

iconfont的不好处

1）字体图标只能被渲染成单色，其颜色不能多样化，由于此限制使得它不能广泛使用。

2）使用版权上有限制，有好多字体是收取费用的，也有很多免费开源的字体图标提供下载使用。

3）创作自己的字体图标很费时间，重构人员后期维护的成本高。