【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文件中，里面有一段字体文件申明。
　　　　

 @font-face {
   font-family: 'icomoon';
   src:  url('fonts/icomoon.eot?tuemkd');
   src:  url('fonts/icomoon.eot?tuemkd#iefix') format('embedded-opentype'),
     url('fonts/icomoon.ttf?tuemkd') format('truetype'),
     url('fonts/icomoon.woff?tuemkd') format('woff'),
     url('fonts/icomoon.svg?tuemkd#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }

　　2、给盒子使用字体

 span {
     font-family: "icomoon";
 }

　　3、盒子里面添加结构

 span::before {
     content: "\e900";
 }

 或者
 <span></span>

　　　

　　代码如下：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style>
         @font-face {
           font-family: 'icomoon';
           src:  url('fonts/icomoon.eot?tuemkd');
           src:  url('fonts/icomoon.eot?tuemkd#iefix') format('embedded-opentype'),
             url('fonts/icomoon.ttf?tuemkd') format('truetype'),
             url('fonts/icomoon.woff?tuemkd') format('woff'),
             url('fonts/icomoon.svg?tuemkd#icomoon') format('svg');
           font-weight: normal;
           font-style: normal;
         }
         span {
             font-family: "icomoon";
             font-size: 100px;
             color: pink;
         }
         span::before {
              content: "\e900";
         }
     </style>
 </head>
 <body>
     <span></span>
 </body>
 </html>

　　效果图
　　　　

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

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style>
         @font-face {
           font-family: 'icomoon';
           src:  url('fonts/icomoon.eot?tuemkd');
           src:  url('fonts/icomoon.eot?tuemkd#iefix') format('embedded-opentype'),
             url('fonts/icomoon.ttf?tuemkd') format('truetype'),
             url('fonts/icomoon.woff?tuemkd') format('woff'),
             url('fonts/icomoon.svg?tuemkd#icomoon') format('svg');
           font-weight: normal;
           font-style: normal;
         }
         p {
             font-family: "icomoon";
             font-size: 100px;
             color: pink;
         }

     </style>
 </head>
 <body>
     <p></p>
 </body>
 </html>

　　效果图
　　　　

追加新图标到原来的库里

　　原来字体压缩包中，有一份json文件。将此文件上传到icomoon中，重新选择需要新添加的图标，然后打包新的字体包，并下载。