@font-face制做小图标的实践

一、为啥要用font-face制做小图标 

 1）适用性：一个图标字体要比一系列的图像要小，一旦字体图标加载完，图标则会马上显示出来，不须要去下载一个图像。

 2）可扩展性：能够使用font-size对图标进行大小设置，这使得可以随时输出不一样大小的图标；但若是是图片，则须要为不一样大小的图片输出不一样的文件。

 3）灵活性：能够为图标添加任何文字效果，而且能够在任何背景下展现。

 4）兼容性：网页字体支持全部现代浏览器，包括IE低版本。

 

二、实现步骤

首先，将SVG转换成web字体。使用网站：Icomoon 

点击‘Import Icons’按钮导入须要转换为web字体的图标。选中后点击 ‘Generate Font’按钮将web字体下载下来。

 

 下载文件中有个demo.html，打开文件，能够看到不一样的图标对应的通字符：

 

 

 其次，调用字体。

 声明@font-face:

@font-face{
            font-family:  'icomoon';
            src: url('fonts/icomoon.eot');    /*  IE 专用 */
            src: url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),   /*  IE */
                url('fonts/icomoon.woff') format('woff'),                      /*  chrome,firefox,IE9+,safari,opera  */
                url('fonts/icomoon.ttf') format('truetype'),                   /*  IOS4.2+  */
                url('fonts/icommon.svg') format('svg');                         /*  IOS  */
            font-weight:  normal;
            font-style:  normal;

        } 

 使用字体：

[class ^="icon-"],[class*=' icon-']{
            font-family:  'icomoon';
        }
        .icon-1:before{
            content:  "\e600";

        } 

 测试代码：

<! DOCTYPE html >
< html >
< head >
     < meta  charset ="utf-8" >
     < title >font-face 测试页面 </ title >
     < style >
        @font-face{
            font-family:  'icomoon';
            src: url('fonts/icomoon.eot');    /*  IE 专用 */
            src: url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),   /*  IE */
                url('fonts/icomoon.woff') format('woff'),                      /*  chrome,firefox,IE9+,safari,opera  */
                url('fonts/icomoon.ttf') format('truetype'),                   /*  IOS4.2+  */
                url('fonts/icommon.svg') format('svg');                         /*  IOS  */
            font-weight:  normal;
            font-style:  normal;
        }
        
        [class ^="icon-"],[class*=' icon-']{ font-family:  'icomoon';}
        .icon-1:before{ content:  "\e600";}
        .icon-2:before{ content:  "\e601";}
        .icon-3:before{ content:  "\e602";}
        .wrap ul{ list-style:  none;}
        .wrap ul li{ line-height:  28px; font-size:  28px;}
     </ style >
</ head >
< body >
     < section  class ="wrap" >
         < ul >
             < li  class ="icon-1" >第一个li </ li >
             < li  class ="icon-2" >第二个li </ li >
             < li  class ="icon-3" >第三个li </ li >
         </ ul >    
        
     </ section > 
</ body >

</html> 

 效果图：