Iconfont

Posted 2020-11-12 shane

Iconfont

 

Iconfont 是指用字体文件取代图片文件，来展示图标、特殊字体等元素的一种方法。很多网站都会用它，比如手淘、新浪微博等。

在使用它之前，先来了解一下它的优缺点：

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

缺点：（1）矢量图只能是纯色的。（2）制作门槛高，耗时长，维护成本也很高。

使用Icon font

 

首先，在我们写代码之前我们需要得到图标字体文件。现在有两种办法提供大家参考。

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

得到了字体文件之后我们就可以说一下如何使用它了。我们在CSS中像设置自定义字体一样使用就可以。

font-face 字体声明：　

 

[css] view plain copy

 

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 的样式：

 

[css] view plain copy

 

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

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

 

[html] view plain copy

 

1. <i class="icon iconfont"></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将都不会渲染任何东西。

有兴趣的同学可以去坑里面走一圈，自己试试坑的深浅。博主就介绍在这里，如果有错误还望大家指出，共同学习。