【Web】网页字体图标的使用

字体图标介绍

　　网页中图片有很多优点，但也有很多缺点，会增加文件的大小以及增加http请求。这时候就需要用的字体图标（iconfont）。字体图标的优点，可以跟图片一样改变透明度、旋转等，本质上是文字，可以改变颜色，产生阴影等；本身体积小；几乎支持所有浏览器。移动端设备必备。

项目中字体图标使用流程

　　1、UI人员设计字体图标效果图（svg）
　　2、前端人员上传生成兼容性字体文件包
　　3、前端人员下载兼容字体文件包到本地
　　4、把字体文件包引入到HTML页面中

生成字体文件包方法

　　上传文件到专门的网站，生成之后下载字体文件包

　　icomoon字库 网站：http://icomoon.io （推荐）

　　阿里icon font字库 网站：http://www.iconfont.cn

HTML页面使用字体图标

　　1、在样式中申明字体，解压下载的字体压缩包，把fonts文件夹复制到项目中，然后打开压缩包中style.css文件中，里面有一段字体文件申明。
　　　　

 1 @font-face {
 2   font-family: \'icomoon\';
 3   src:  url(\'fonts/icomoon.eot?tuemkd\');
 4   src:  url(\'fonts/icomoon.eot?tuemkd#iefix\') format(\'embedded-opentype\'),
 5     url(\'fonts/icomoon.ttf?tuemkd\') format(\'truetype\'),
 6     url(\'fonts/icomoon.woff?tuemkd\') format(\'woff\'),
 7     url(\'fonts/icomoon.svg?tuemkd#icomoon\') format(\'svg\');
 8   font-weight: normal;
 9   font-style: normal;
10 }

　　2、给盒子使用字体

1 span {
2     font-family: "icomoon";            
3 }

　　3、盒子里面添加结构

1 span::before {
2     content: "\e900";      
3 }
4 
5 或者
6 <span></span>

　　代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         @font-face {
 8           font-family: \'icomoon\';
 9           src:  url(\'fonts/icomoon.eot?tuemkd\');
10           src:  url(\'fonts/icomoon.eot?tuemkd#iefix\') format(\'embedded-opentype\'),
11             url(\'fonts/icomoon.ttf?tuemkd\') format(\'truetype\'),
12             url(\'fonts/icomoon.woff?tuemkd\') format(\'woff\'),
13             url(\'fonts/icomoon.svg?tuemkd#icomoon\') format(\'svg\');
14           font-weight: normal;
15           font-style: normal;
16         }
17         span {
18             font-family: "icomoon";
19             font-size: 100px;
20             color: pink;
21         }
22         span::before {
23              content: "\e900";      
24         }
25     </style>
26 </head>
27 <body>
28     <span></span>
29 </body>
30 </html>

　　效果图
　　　　

　　或者使用 span标签中间是复制demo中的内容。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         @font-face {
 8           font-family: \'icomoon\';
 9           src:  url(\'fonts/icomoon.eot?tuemkd\');
10           src:  url(\'fonts/icomoon.eot?tuemkd#iefix\') format(\'embedded-opentype\'),
11             url(\'fonts/icomoon.ttf?tuemkd\') format(\'truetype\'),
12             url(\'fonts/icomoon.woff?tuemkd\') format(\'woff\'),
13             url(\'fonts/icomoon.svg?tuemkd#icomoon\') format(\'svg\');
14           font-weight: normal;
15           font-style: normal;
16         }
17         p {
18             font-family: "icomoon";
19             font-size: 100px;
20             color: pink;
21         }
22         
23     </style>
24 </head>
25 <body>
26     <p></p>
27 </body>
28 </html>