字体图标 iconfont

图片有着诸多优点，但缺点也很明显。如，它不但增加了总文件的大小，还会增加一些额外的“http请求”，这大大降低了网页的性能；同时，图片不能很好的缩放（可能导致图片失真），而在移动端开发中，很多情况下我们希望图标可以缩放 ...

字体图标：使用自定义字体的方式来实现图标。

[ 优点 ] 网页中很多图标的实现是通过自定义字体的方式实现的，当然，也可以通过小图片的方式来实现。

那么，为什么要使用字体图标呢？

可以做出跟图片一样的事情，改变透明度、旋转等，可以很容易地任意缩放；

本质上其实是文字，可以很容易地改变颜色、拥有透明效果、产生阴影 ...

本身体积更小，但携带的信息并没有削减；

可以得到 CSS 很好的支持，浏览器支持好（ IE8+ ）;

移动端设备必备良药 ...

字体图标资源

[ 使用流程 ] 字体图标的使用流程总体来说，主要分为以下几个步骤：

[1] UI设计 icon 图标：UI 人员设计字体图标效果图，一般为 svg 格式；

如果图标是公司自己设计的，就需要第一步了。由UI设计人员在illustrator或Sketch等矢量图软件中创建icon图标：

之后，保存为 svg 格式，然后交给前端人员就好了。如果图标是网上本来就有的，可以跳过第一步，进入第三步。

[2] 上传生成字体包：前端人员上传生成兼容性字体文件包；

当 UI 给我们 svg 文件的时，我们需要转换成页面能够使用的字体文件，且兼容性方面能够适应各个浏览器。

iconfont字库（http://www.iconfont.cn）:阿里妈妈M2UX的iconfont字体图标字库，包含了淘宝图标库和阿里妈妈图标库，可以使用AI制作图片上传生成，国内服务器，而且免费。

icomoon字库（http://www.icomoon.io）：icoMoon成立于2001年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，内容种类繁多、全面，唯一遗憾的是国外服务器，打开速度相对较慢。

Fontello（http://www.fontello.com）:在线定制自己的iconfont字体图标库，可以直接从Github上下载整个图标库，该项目也是开源的。

[3] 准备字体图标文件：前端人员下载兼容字体文件包到本地； // 推荐：http://www.iconfont.cn

上传完毕后，网站会将UI制作的svg图片转换为前端需要的字体格式文件，然后下载下来就好了。

当然，可以不是自己专门设计图标，直接从上述网站中下载自己喜欢的图标使用就可以了。

下载后的字体图标一般有5个文件，为了满足不同浏览器的兼容。

[4] 代码示例：把字体文件包引入到HTML页面中。 // 多种实现方式，具体可参考不同的字体库

1. 引入：在样式里面声明字体，使用@font-face规则引入自定义字体图标。

@font-face {             // 电脑中没有的字体，需要声明
    font-family: 'myFont';
    src: url('./font/fontello.eto#iefix')format('embedded-opentype'),
         url('./font/fontello.woff2')format('woff2'),
         url('./font/fontellw.woff')format('woff'),
         url('./font/fontello.ttf')format('truetype'),
         url('./font/fontello.svg#fontello')format('svg');
    }
    或（略）
    src: url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAD');
        
// EOT:IE专用；WOFF:标准；TTF:最常见(safari/android/ios)；SVG:图形格式(IE和firefox不支持)


2. 声明字体
   .myFont{
	 font-family: 'myFont';
	 -webkit-font-smoothing:antialiased;  // 字体抗锯齿、光滑度属性
	 -mox-osx-font-smoothing: grayscale;  // 字体抗锯齿、光滑度属性
	}
   .icon-glass:before{content: "\e800";}
   .icon-music:before{content:"\e801";}

3. 在HTML中显示
   <span class="myFont icon-glass"></span>
   <span class="myFont icon-music"></span>

   // 进一步，CSS样式设置
   .colred{color:red;}
   .f-32{font-size:32px;}
   .f-shadow{text-shadow:1px 2px 2px;}

   <span class="myFont icon-glass cilred">小心放置</span>
   <span class="myFont icon-music f-32 f-shadow">《十年》</span>

1. 引入：在样式里面声明字体，使用@font-face规则引入自定义字体图标。

@font-face { // 电脑中没有的字体，需要声明

font-family: 'myFont';

src: url('./font/fontello.eto#iefix')format('embedded-opentype'),

url('./font/fontello.woff2')format('woff2'),

url('./font/fontellw.woff')format('woff'),

url('./font/fontello.ttf')format('truetype'),

url('./font/fontello.svg#fontello')format('svg');

}

或（略）

src: url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAD');

// EOT:IE专用；WOFF:标准；TTF:最常见(safari/android/ios)；SVG:图形格式(IE和firefox不支持)

2. 声明字体

.myFont{

font-family: 'myFont';

-webkit-font-smoothing:antialiased; // 字体抗锯齿、光滑度属性

-mox-osx-font-smoothing: grayscale; // 字体抗锯齿、光滑度属性

}

.icon-glass:before{content: "\e800";}

.icon-music:before{content:"\e801";}

3. 在HTML中显示

// 进一步，CSS样式设置

.colred{color:red;}

.f-32{font-size:32px;}

.f-shadow{text-shadow:1px 2px 2px;}

小心放置

《十年》