1.什麼是字型圖示

可以看作一種特殊字型，其展示的是圖示，而不再是文字，其擁有字型的特性，比如大小、顏色、透明效果、陰影等，字型圖示載入快、不變形。也可以看作是向量格式的圖示。

2.字型圖示常用免費資源

（1）iconmoon字型圖示庫：https://icomoon.io/app

（2）阿里iconfont字型圖示庫：https://www.iconfont.cn/

（3）font-awesome字型圖示庫：

3.字型圖示使用步驟

以iconmoon為例

（1）選擇需要的圖示並下載

1）在fonts資料夾下有四種類型的字型檔案，每種字型檔案相容瀏覽器的種類不同

a）.tff格式（TrueTypeFont），美國蘋果公司和微軟公司共同開發的，在Windows和Mac作業系統中為預設字型；IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile中的Safari4.2+等瀏覽器支援該字型。

b）.woff格式（Web Open Font Format-Web開放字型格式），是一種網頁所採用的字型格式標準，使用zlib壓縮，檔案大小一般比TTF小40%；IE9+、FireFox3.6+、Chrome6+、Safari5.1+、Opera11.1+等瀏覽器支援該字型。

c）.eot格式（Embedded Open Type-嵌入式OpenType ）,微軟設計用來在網頁使用的字型格式，是OpenType字型的壓縮格式，IE專用，IE4+支援該字型。

d）.svg格式（Scalable Vector Graphics-可縮放的向量圖形），它是一種用XML定義的語言，用來描述二維向量及向量/柵格圖形；Chrome4+、Safari3.1+、Opera10+、IOS Mobile中Safari3.2+等瀏覽器支援該字型。

其他字型

e）.otf格式（Open Type Font），Microsoft和Adobe公司開發的，.otf格式比.ttf更為強大，可以把PostScript字型嵌入到TrueType中。

2）字型轉換

https://www.fontke.com/tool/convfont/

（2）字型圖示的引入

1）把字型放到專案的相應位置

將下載解壓後的fonts資料夾放到專案路徑下

2）在html頁面中引入字型

利用CSS的@font-face屬性，引入外部字型；

在style.css檔案中有如下程式碼，為固定用法，注意url中字型路徑，其它可以不變。

在html的style標籤中引入如下程式碼：

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

3）為元素用該字型

span {        font-family: "icomoon";    }

4）為元素新增內容

複製demo.html中需要的圖示，如下，將其作為元素的內容。

<span></span> 

（3）新增字型圖示的引入

當利用iconmoon選用字型圖示時，如果有新增的字型圖示需要加入，則需要用到.json檔案，如下，在原先選擇的基礎上，再選擇新選擇的字型圖示，然後再下載使用。