HTML5學堂小編的話：昨日發佈的iconfont的內容有些不足，對於可能不太瞭解iconfont和特殊字體的學習者來講，可能會存在必定的理解問題，在此針對昨日內容進行補充，詳細講解。
字體相關知識
javascript
瞭解iconfont（字體圖標）前咱們先了解下字體，由於iconfont的實現與字體息息相關，因此掌握字體相關知識便於理解iconfont。接下來看一個簡單的例子css
<!doctype html>html
<html>前端
<head>java
<meta charset="UTF-8">jquery
<title>HTML5Course - 夢幻雪冰</title>chrome
<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的優點
一、相比圖片的大小容量，iconfont幾乎是羽翼級輕量。
二、圖標都被打包在字體庫裏面，減小了HTTP的請求數量，加速網頁加載速度。咱們採用雪碧圖的目的也是減小圖片請求數量。
三、使用iconfont很是方便，和設置網頁字體同樣，能夠利用CSS來定義圖標大小、圖標顏色、圖標透明度等
iconfont的劣勢
一、利用CSS沒法方便的定義多彩的icon，大部分是單一顏色。
二、由於iconfont跟字體有關，因此它很容易受到字符編碼的影響。
iconfont的使用
平時的網頁開發該如何使用iconfont？在這邊微信小編給你們推薦一個工具：Iconfont-阿里巴巴矢量圖標庫。
一、打開http://www.iconfont.cn，選擇圖標庫導航（註冊一個帳號，方便操做）。
二、根據項目需求選擇一個圖標庫點擊進去，而後選擇圖標。
三、下載打包好的圖標，裏面包含了圖標庫和代碼實例。
如何在文本或僞元素當中實現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學堂
HTML5學堂
HTML5技術原創分享平臺
加入HTML5學堂
原來技術能夠通俗易懂
每一天 都在爲將來積蓄力量
以爲不錯，您再分享，分享朋友圈也是一種打賞
微信：HTML5_Course 微博：@前端技術分享網
本文分享自微信公衆號 - HTML5 WEB前端分享（h5course-com）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。