前端學習之字體圖標(iconfont)

Web字體

字體格式

不同的瀏覽器支持的字體格式是不一樣的。

1. tureTypeFont(.ttf)格式
   . ttf字體是Windows和Mac的最常見的字體，是一種RAW格式，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+
2. OpenTypeFont(.otf)格式
   .otf字體被認爲是一種原始的字體格式，其內置在TureType的基礎上，支持這種字體的瀏覽器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+
3. Web Open Font Format (woff)格式
   .woff字體是Web字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支持元數據包的分離，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+
4. Embedded Open Type(.eot)格式
   .eot字體是IE專用字體，可以從TrueType創建此格式字體，支持這種字體的瀏覽器有IE4+
5. SVG(.svg)格式
   .svg字體是基於SVG字體渲染的一種格式，支持這種字體的瀏覽器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+

字體圖標

圖片有諸多優點，但是缺點也很明顯。比如圖片不但增加了總文件的大小，也增加了很多額外的"http請求"。這會大大降低網頁的性能。更重要的是，圖片不能很好的進行縮放，因爲圖片放大縮小會失真。後面學習移動端響應式，很多情況下希望圖標是可以縮放的。因此就需要字體圖標（iconfont）。

字體圖標的優點

• 可以做出圖片能做出的事，改變透明度，旋轉度等…
• 本質其實是字體，可以很隨意的改變顏色，產生陰影，透明效果等等…
• 本身體積更小，但攜帶的信息並沒有削減
• 幾乎支持所有瀏覽器
• 移動端設備必備良藥

字體圖標使用流程

1.UI人員設計字體圖標效果圖
2. 前端人員上傳生成兼容性字體文件包
3. 前端人員下載兼容字體文件包到本地
4. 把文件包引入HTML頁面中

上傳生成字體文件包

因爲第一步是UI人員設計，與前端無關就跳過。
當UI設計人員給我們svg文件的時候，我們需要轉換成我們頁面能使用的字體文件， 而且需要生成的是兼容性的適合各個瀏覽器的。具體操作在下面下載字體包案例中說明。

icomoon字庫

推薦網站：http://icomoon.io
IcoMoon成立於2011年，推出的第一個自定義圖標字體生成器，它允許用戶選擇他們所需要的圖標，使它們成一字型。 內容種類繁多，非常全面，唯一的遺憾是國外服務器，打開網速較慢。

阿里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

下載兼容字體包

以icomoon字庫爲例：
1.打開官網點擊右上角的icoMoon App

 
 
2.進入如下頁面選擇需要的圖標，點擊Generate Font

 
 
3.進入如下頁面，點擊download即可下載下來。


ps:也可以點擊如下按鈕進入更多的字體圖標樣式中，選擇想要的圖標樣式



 
 

上傳生成字體文件包

還是回到剛纔的icoMoon App頁面 ，點擊import icons.選擇需要上傳成字體文件包的svg文件即可生成。


 
 

字體圖標的使用

即將下載下來的字體圖標引入html。
下載的文件如下圖

1. 在樣式中聲明字體（這段在下載的style.css文件中就有，直接拷貝即可）

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

2. 給盒子使用字體

span{
		font-family: "icomoon"
	}

3. 盒子裏面添加結構
   分兩種，一種直接拷貝demoy頁面的圖標如下圖，然後粘貼進元素結構內，還有一種使用僞元素。
   

//1.直接拷貝demo.html裏面的某個元素
<span></span>
//2.或者使用僞元素
span::before{
		content: "\e973"
	}

效果圖：

追加新圖標到原來的庫裏

如果工作中，原來的字體圖標不夠用了，我們需要添加新的字體圖標，但是原來的不能刪除，繼續使用，此時我們需要這樣做：
把壓縮包裏面的selection.json 從新上傳，然後，選中自己想要新的圖標，從新下載壓縮包，替換原來文件即可。


這樣就可以基於原有的圖標，再選擇其他的，然後重新下載下來使用。