技術標籤：csshtml前端

上傳生成字型包

當UI設計人員給我們svg檔案的時候，我們需要轉換成我們頁面能使用的字型檔案， 而且需要生成的是相容性的適合各個瀏覽器的。

​ 推薦網站： http://icomoon.io

icomoon字型檔

IcoMoon成立於2011年，推出的第一個自定義圖示字型生成器，它允許使用者選擇他們所需要的圖示，使它們成一字型。 內容種類繁多，非常全面，唯一的遺憾是國外伺服器，開啟網速較慢。

推薦網站： http://www.iconfont.cn/

阿里icon font字型檔

http://www.iconfont.cn/

這個是阿里媽媽M2UX的一個icon font字型圖示字型檔，包含了淘寶圖示庫和阿里媽媽圖示庫。可以使用AI製作圖示上傳生成。 一個字，免費，免費！！

fontello

http://fontello.com/

線上定製你自己的icon font字型圖示字型檔，也可以直接從GitHub下載整個圖示集，該專案也是開源的。

Font-Awesome

http://fortawesome.github.io/Font-Awesome/

這是我最喜歡的字型檔之一了，更新比較快。目前已經有369個圖示了。

Glyphicon Halflings

http://glyphicons.com/

這個字型圖示可以在Bootstrap下免費使用。自帶了200多個圖示。

Icons8

https://icons8.com/

提供PNG免費下載，畫素大能到500PX

字型引入到HTML

得到壓縮包之後，最後一步，是最重要的一步了， 就是字型檔案已經有了，我們需要引入到我們頁面中。

1. 首先把 以下4個檔案放入到 fonts資料夾裡面。 通俗的做法

第一步：在樣式裡面宣告字型： 告訴別人我們自己定義的字型

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

第二步：給盒子使用字型

span {
		font-family: "icomoon";
	}

第三步：盒子裡面新增結構

span::before {
		 content: "\e900";
	}
或者  
<span></span>