@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> 

 效果圖：