17 字型圖示
1 字型圖示的產生
字型圖示使用場景： 主要用於顯示網頁中通用、常用的一些小圖示。
精靈圖是有諸多優點的，但是缺點很明顯。
1.圖片檔案還是比較大的。
2.圖片本身放大和縮小會失真。
3.一旦圖片製作完畢想要更換非常複雜。
此時，有一種技術的出現很好的解決了以上問題，就是字型圖示 iconfont。
字型圖示可以為前端工程師提供一種方便高效的圖示使用方式，展示的是圖示，本質屬於字型。
2 字型圖示的優點
輕量級：一個圖示字型要比一系列的影象要小。一旦字型載入了，圖示就會馬上渲染出來，減少了伺服器請求
靈活性：本質其實是文字，可以很隨意的改變顏色、產生陰影、透明效果、旋轉等
相容性：幾乎支援所有的瀏覽器，請放心使用
注意： 字型圖示不能替代精靈技術，只是對工作中圖示部分技術的提升和優化。
總結：
1.如果遇到一些結構和樣式比較簡單的小圖示，就用字型圖示。
2.如果遇到一些結構和樣式複雜一點的小圖片，就用精靈圖。
使用步驟:
字型圖示是一些網頁常見的小圖示，我們直接網上下載即可。 因此使用可以分為：
1.字型圖示的下載
2.字型圖示的引入 （引入到我們html頁面中）
3.字型圖示的追加 （以後新增新的小圖示）
3.下載字型圖示
推薦下載網站：
icomoon 字型檔 http://icomoon.io 推薦指數 ★★★★★
IcoMoon 成立於 2011 年，推出了第一個自定義圖示字型生成器，它允許使用者選擇所需要的圖示，使它們成一字型。該字型檔內容種類繁多，非常全面，唯一的遺憾是國外伺服器，開啟網速較慢。
阿里 iconfont 字型檔 http://www.iconfont.cn/ 推薦指數 ★★★★★
這個是阿里媽媽 M2UX 的一個 iconfont 字型圖示字型檔，包含了淘寶圖示庫和阿里媽媽圖示庫。可以使用 AI製作圖示上傳生成。 重點是，免費！
icomoon使用:(阿里媽媽的使用也類似)
1.進入網站後點擊右上角的icoMoon App
2.選擇你想要的圖示
3. 如果沒有你想要的,下拉選擇 add icons from library
4.選擇完後,點選右下角的generate font,然後點選download
4 字型圖示的引入
下載完畢之後，注意原先的檔案不要刪，後面會用。
1. 把壓縮包裡面的 fonts 資料夾放入頁面根目錄下
字型檔案格式:
不同瀏覽器所支援的字型格式是不一樣的，字型圖示之所以相容，就是因為包含了主流瀏覽器支援的字型檔案。
1.TureType(.ttf)格式.ttf字型是Windows和Mac的最常見的字型，支援這種字型的瀏覽器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
2.Web Open Font Format(.woff)格式woff字型，支援這種字型的瀏覽器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
3.Embedded Open Type(.eot)格式.eot字型是IE專用字型，支援這種字型的瀏覽器有IE4+；
4.SVG(.svg)格式.svg字型是基於SVG字型渲染的一種格式，支援這種字型的瀏覽器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；
2.在 CSS 樣式中全域性宣告字型： 簡單理解把這些字型檔案通過css引入到我們頁面中。
把下面這段程式碼放到style中,一定注意字型檔案路徑的問題。也可以從壓縮包中的style.css檔案中將這段程式碼複製出來.
@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;
}
3. html 標籤內新增小圖示。
開啟壓縮包裡面的demo.html檔案,複製圖示後面的小方框到自己的html標籤中
4. 給標籤定義字型。
span {
font-family: "icomoon";
}
務必保證 這個字型和上面@font-face裡面的字型保持一致
<!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>字型圖示的使用</title> <style> /* 字型宣告 */ @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?p4ssmb'); src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?p4ssmb') format('truetype'), url('fonts/icomoon.woff?p4ssmb') format('woff'), url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } span { font-family: 'icomoon'; font-size: 100px; color:pink; } </style> </head> <body> <span></span> <span></span> </body> </html>
5.字型圖示的追加
如果工作中，原來的字型圖示不夠用了，我們需要新增新的字型圖示到原來的字型檔案中。
把壓縮包裡面的 selection.json 從新上傳，然後選中自己想要新的圖示，從新下載壓縮包，並替換原來的檔案即可。
字型圖示載入原理:
只請求一次返回所有的字型檔案