【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中，重新选择需要新添加的图标，然后打包新的字体包，并下载。
　　　　