聊聊Iconfont

1、前言

提及Iconfont，对大多数人来讲可能不是什么新的技术了，如今好多大网站已经开始使用Iconfont。博主今天主要是简单说一下它的使用方法，聊聊使用它时可能遇到哪些坑，不熟悉的同窗能够简要看一下，资深了解的同窗，若是发现问题，还请指正。

 

2、什么是Iconfont

有的同窗可能会问什么是Iconfont ？

其实，Iconfont 就是指用字体文件取代图片文件，来展现图标、特殊字体等元素的一种方法。

那么哪些网站在用它呢？有什么优缺点？以及如何使用它，接下来咱们一一解答这几个问题。

首先让咱们来看看都哪些网站使用了Iconfont 。

 

淘宝用到的地方

  

 

 

新浪微博用到的地方

还有像豆瓣，一淘，想玩等网站也都用到了它，我就不一一粘结图出来了，有兴趣的同窗能够去瞧一瞧。

 

看完别人用到的地方，你们是否是也开始跃跃欲试了呢？

不过在具体说使用它以前，还需了解一下Iconfont 有什么优缺点，到底适不适合咱们在项目中使用。

先来看看优势：

1. 加载文件体积小。
2. 能够直接经过css的font-size，color修改它的大小和颜色，对于须要缩放多个尺寸的图标，是个很好的解决方案。
3. 支持一些css3对文字的效果，例如：阴影、旋转、透明度。
4. 兼容低版本浏览器。

不过它也有局限性，不能做为css sprite的替代品，咱们来看看缺点：

1. 矢量图只能是纯色的。
2. 制做门槛高，耗时长，维护成本也很高。

看到这些优缺点以后，咱们能够决定它是否能够直接在咱们的项目中使用 , 不论咱们的项目是否可使用它，都不妨碍咱们去了解它， 接下来咱们来看一下如何使用它。

 

3、使用Iconfont

首先，在咱们写代码以前咱们须要获得图标字体文件。如今有两种办法提供你们参考。

1. 让设计师设计矢量图片而后经过工具直接转换成相应的字体。
2. 使用第三方Iconfont 在线服务（例如： 阿里巴巴Iconfont平台 ），而后直接上传你本身设计的图标矢量图生成字体文件。

获得了字体文件以后咱们就能够说一下如何使用它了。咱们在CSS中像设置自定义字体同样使用就能够。

 

font-face 字体声明：　　　

1 @font-face {font-family: "iconfont";
2   src: url('iconfont.eot'); /* IE9*/
3   src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
4   url('iconfont.woff') format('woff'), /* chrome, firefox */
5   url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
6   url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
7 }

咱们看到，不一样的浏览器调用不一样的字体文件。

 

定义一下Iconfont 的样式：

1 .iconfont {
2   font-family:"iconfont" !important;
3   font-size:16px;
4 }

 

咱们能够经过字体的大小font-size和自体颜色color改变图标的大小和颜色。示例图以下：

    

 

挑选图标对应的字体编码，应用于页面中：

<i class="icon iconfont">&#xe60e;</i>

 

接下面咱们再来讲说Iconfont在使用过程当中可能遇到的各类坑。

1. 字体图标在一些浏览器下会遇到被加粗的问题，设置-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;解决。
2.  跨域访问不到字体，因为怕字体版权得不到保护，默认跨域的字体文件是访问不到的，通常经过服务器设置 Access-Control-Allow-Origin指定本身须要的网站和设置同域来解决这个问题。
3.  不要包含没有使用的@font-face，IE将部分他是否使用，通通加载下来。万恶的IE。
4.  @font-face声明以前，若是有script标签的话，直到字体文件完成下载以前，IE将都不会渲染任何东西。

有兴趣的同窗能够去坑里面走一圈，本身试试坑的深浅。博主就介绍在这里，若是有错误还望你们指出，共同窗习。

 

 

 

 

本博客文章皆为原创，未尽许可，请勿转载 （http://www.cnblogs.com/song-song/p/5212706.html）