前端之HTML，CSS（十一）

　　字體圖標

　　使用文字做出小圖標的效果並超越了小圖標應用精靈圖，使得圖標變得靈活，減少了請求次數，優化了界面的性能。字體圖標本身為矢量圖。

　　字體圖標的使用過程

　　1.UI設計字體圖標效果圖

　　使用illustrator或者Sketch矢量圖軟件創建icon圖標，並保存svg格式。

　　2.前端上傳生成兼容性字體文件包

　　將svg格式文件轉換成頁面能夠使用的字體文件，並且需要兼容各種瀏覽器。

　　icomoon字庫：https://icomoon.io/

　　阿里媽媽字庫：https://www.iconfont.cn/

　　3.前端下載兼容字體文件包至本地

　　icomoon字庫簡單使用教程

　　1.打開icomoon字庫頁面以后，點擊IconMoon APP

2.點擊IcoMoon APP 以后，選擇自己想要的圖標，可以多項選擇。

3.選擇好圖標以后，找到頁面右下角處的Generate Font生成字體

4.點擊Generate Font以后，頁面跳轉后，右下角處變為Dowmload

5.點擊Download下載，下載完成以后，找到下載后的文件夾。

　　4.字體文件包引入HTML頁面

　　1.解壓下載好的文件夾。

2.打開icomoon文件夾，找到fonts文件夾

3.復制fonts文件夾到自己的項目文件中

4.頁面中聲明並調用字體圖標

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

View Code

　　5.找到解壓后文件夾icomoon中的demo.html

6.瀏覽器打開，復制所用字體圖標后的小方塊

7.將復制的小方塊粘貼在頁面所需位置

8.保存，瀏覽器打開頁面

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>字體圖標-測試</title>
 6     <style type="text/css">
 7         @font-face {  /*聲明字體  引用字體*/
 8           font-family: "icomoon";  /*可以自定義*/
 9           src: url('fonts/icomoon.eot?7kkyc2');
10           src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
11               url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
12               url('fonts/icomoon.woff?7kkyc2') format('woff'),
13               url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
14           font-style: normal;  /*傾斜字體正常*/
15         }
16         span {
17             font-family: "icomoon";  /*與聲明中font-family相同 */
18             font-size: 100px;  /*設置字體圖標大小*/
19             color: red;
20             font-style: normal;
21         }
22     </style>
23 </head>
24 <body>
25     <span></span>
26 </body>
27 </html>

View Code

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS字體圖標 CSS 讓 fontawesome 圖標字體變細抓取網頁中的圖標或字體 Bootstrap中的Glyphicon 字體圖標 webpack中如何使用圖標字體一句 CSS 讓 fontawesome 圖標字體變細 css字體圖標的制作和使用。 CSS之精靈圖（雪碧圖）與字體圖標 CSS3自定義字體、字體圖標 CSS中的字體設置