iconfont字型圖示庫
HTML5學堂小編的話：昨日釋出的iconfont的內容有些不足，對於可能不太瞭解iconfont和特殊字型的學習者來說，可能會存在一定的理解問題，在此針對昨日內容進行補充，詳細講解。
字型相關知識
瞭解iconfont（字型圖示）前我們先了解下字型，因為iconfont的實現與字型息息相關，所以掌握字型相關知識便於理解iconfont。接下來看一個簡單的例子
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5Course - 夢幻雪冰</title> <link rel="stylesheet" href="reset.css"> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <style> .font-demo p:nth-child(1) { font-family: 'Microsoft YaHei'; } .font-demo p:nth-child(2) { font-family: Arial; } </style> </head> <body> <div class="font-demo"> <p>HTML5學堂</p> <p>摩登足跡</p> </div> </body> </html>
結果：
分析：
在網頁中，微信小編給段落分別設定了兩個不同的字型，頁面上的段落文字就會按照設定的字型進行渲染。大家可能會有一個疑問？為什麼字型設定為Arial頁面展示的文字是Arial的樣式，設定成Microsoft YaHei就展示成Microsoft YaHei的樣式？具體原因請看下面的例子。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5Course - 夢幻雪冰</title> <link rel="stylesheet" href="reset.css"> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <style> .font-demo p:nth-child(1) { font-family: 'Microsoft YaHei'; } .font-demo p:nth-child(1) { font-family: 'Arial'; } </style> </head> <body> <div class="font-demo"> <p>HTML5 学 堂</p> <p>摩登足迹</p> </div> </body> </html>
結果：
分析：
1 微信小編把'HTML5學堂'和'摩登足跡'這幾個字改為unicode編碼，此時頁面上仍然能以微軟雅黑字型展示為HTML5學堂。
2 使用瀏覽器開啟頁面時，瀏覽器會解析HTML檔案進行渲染。當讀到'HTML5學堂'或者'摩登足跡'字時會轉換成對應的 unicode碼（unicode碼可以認為是字的特定編號）。
3 瀏覽器再根據CSS裡面設定的font-family查詢對應的字型檔案。如果CSS裡面沒有設定字型，就會使用瀏覽器的預設設定。如果有自定義字型@font-face網路字型，則載入對應字型檔案。
4 瀏覽器找到檔案後根據unicode碼去查詢繪製外形，最後把找到的結果繪製到頁面上。
iconfont是什麼
相信大家看到這邊更進一步瞭解了網頁字型的渲染流程，接下來我們來看看iconfont。
將iconfont拆開來看，就是icon（圖示）和font（字型）。簡單的說iconfont就是利用字型工具把我們平時網頁上用的圖形圖示轉換成網頁字型。其實跟字型差不多，字型對應的是文字，iconfont對應的是圖示
iconfont的實際應用
2.1 手機百度首頁
2.2 手機淘寶首頁
iconfont有什麼優勢與劣勢
iconfont的優勢
1、相比圖片的大小容量，iconfont幾乎是羽翼級輕量。
2、圖示都被打包在字型庫裡面，減少了HTTP的請求數量，加速網頁載入速度。我們採用雪碧圖的目的也是減少圖片請求數量。
3、使用iconfont非常方便，和設定網頁字型一樣，可以利用CSS來定義圖示大小、圖示顏色、圖示透明度等
iconfont的劣勢
1、利用CSS無法方便的定義多彩的icon，大部分是單一顏色。
2、因為iconfont跟字型有關，所以它很容易受到字元編碼的影響。
iconfont的使用
平時的網頁開發該如何使用iconfont？在這邊微信小編給大家推薦一個工具：Iconfont-阿里巴巴向量圖示庫。
1、開啟http://www.iconfont.cn，選擇圖示庫導航（註冊一個賬號，方便操作）。
2、根據專案需求選擇一個圖示庫點選進去，然後選擇圖示。
3、下載打包好的圖示，裡面包含了圖示庫和程式碼例項。
如何在文字或偽元素當中實現iconfont
在網頁當中，通過文字來實現，如上就是用來實現“較粗的關閉”；
在after或before偽元素當中，通過設定content: 'e600'; 來實現“較粗的閉”；
iconfont實戰練習
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5Course - 夢幻雪冰</title>
<link rel="stylesheet" href="reset.css">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style>
/*第一步：使用font-face宣告字型*/
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome、firefox */
url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.font-demo {
padding: 20px;
}
/*第二步：定義使用iconfont的樣式*/
.font-demo:after {
font-family: 'iconfont';
/*第三步：設定圖示對應的編碼，應用於頁面*/
content: 'e6d4';
}
</style>
</head>
<body>
<div class="font-demo">摩登足跡</div>
</body>
</html>結果：
問題：如何設定圖示的樣式？比如設定成#09f的樣。
提示：阿里巴巴向量圖示庫下載的時候提供了詳細的程式碼例項。
歡迎溝通交流~HTML5學堂