字體圖標
圖片是由諸多的優點的，但是缺點很明顯，比如圖片不但增加了總文件的大小，還增加了很多額外的“http請求”
者都會大大降低網頁的性能的。更重要的是圖片不能很好地進行“縮放”，此時，一個非常重要的技術出現了，
額不是出現了，是以前就有，是被從新“寵幸”啦。。這就是字體圖標（iconfont）。
1. 字體圖標優點
可以做出跟圖片一樣可以做的事情，改變透明度、旋轉度、等...
但是本質其實是文字，可以很隨意的改變顏色、產生陰影、透明效果等等...
本身體積更小，但攜帶的信息並沒有削減。
移動端設備必備良藥...
2. 字體圖標使用流程
總體來說，字體圖標按照如下流程：
3. 設計字體圖標
加入圖標是我們公司單獨設計，那就需要第一步了，這個屬於UI設計人員的工作，他們在illustrator
或sketch這類矢量圖形軟件裏創建icon圖標。
比如下圖：
之後保存爲svg格式，然後給我們前端人員就好了。
其實第一步，我們不需要關心，只需要給我們這些圖標就可以了，如果圖標是大衆的，網上本來就有的，
可以直接跳過第一步，進入第三步。
4. 上傳生成字體包
當UI設計人給我們svg文件的時候，我們需要轉換成我們頁面能使用的字體文件，而且需要生成的是兼容性的
適合各個瀏覽器的。
推薦網站： http://icomoon.io
1.icomoon字庫
icomoon成立於2011年，推出的第一個自定義圖標生成器，它允許用戶選擇他們所需要的圖標，使它們成一字型。
內容種類繁多，非常全面，唯一的遺憾是國外服務器，打開網速較慢。
推薦網站： http://www.iconfont.cn/
2. 阿里iconfont字庫
http://www.iconfont.cn
這個是阿里媽媽M2UX的一個iconfont字體圖標字庫，包含了淘寶圖標庫和阿里媽媽圖標庫。
可以使用AI製作圖標上傳生成一個字，免費，免費。。。
5. 下載兼容字體包
剛纔上傳完畢，網站會給我們把UI做的svg圖片轉換爲我們的字體格式，然後下載下來就好了。
當然，我們不需要自己專門的圖標，是想網上找幾個圖標使用，以上2步可以直接省略了，直接到剛纔的網站上找
喜歡的下載使用吧。
6. 字體引入到HTML
得到壓縮包之後，我們得知字體圖標本質就是字體文件。注意這個壓縮包不要刪除，我們後面還有用的。
最後一步，是最重要的一步了，就是字體文件已經有了，我們需要引入到我們頁面中。
1. 首先把fonts文件夾放到我們根目錄下。
2. html標籤內裏面添加結構
<span></span>
3. 在樣式裏面聲明字體：告訴別人我們自己定義的字體（一定注意字體文件路徑的問題）
@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?7kkc2') format('truetype'),
url('fonts/icomoon.woff?7kkc2') format('woff'),
url('fonts/icomoon.svg?7kkc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
4. 給盒子使用字體
span {
font-family: "icomoon";
}
7. 追加字體圖標
如果工作中，原來的字體不夠用了，我們需要添加新的字體圖標，但原來的不能刪除，繼續使用，
此時我們需要這樣做。
把壓縮包裏面的selection.json從新上傳，然後，選中自己想要新的圖標，從新下載壓縮包，替換原來文件
即可。
接下來看看案例
命令示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
@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?7kkc2') format('truetype'),
url('fonts/icomoon.woff?7kkc2') format('woff'),
url('fonts/icomoon.svg?7kkc2#icomoon') format('svg');
font-weight:normal;
font-styl:normal;
}
span,
div,
strong{
font-family: 'icomoon';
font-size: 50px;
color: red;
}
</style>
</head>
<body>
<span></span>
<div></div>
<strong></strong>
</body>
</html>
網頁效果圖：
只用於學習與交流！！！
