Web前端培訓(xùn)：如何使用Iconfont實(shí)現(xiàn)字體圖標(biāo)?

首先,我們先看了解一下什么是 IconFont：

IconFont 就是字體圖標(biāo)。嚴(yán)格地說(shuō)，就是一種字體，但是，這種字體不包含字母或數(shù)字，而是包含符號(hào)和字形。您可以使用 CSS 設(shè)置樣式，就像設(shè)置常規(guī)文本一樣，這使得 IconFont 成為 Web 開發(fā)時(shí)圖標(biāo)的熱門選擇。

接著,我們來(lái)看下網(wǎng)站中哪些地方是用了字體圖標(biāo)的：

IconFont 的產(chǎn)生的背景：

我們都知道，在網(wǎng)頁(yè)制作中，會(huì)經(jīng)常用到不同的字體，常用的有微軟雅黑、宋體、Aria 等等。在我們寫css的樣式的時(shí)候，通過(guò) font-family 可以指定元素的字體名稱，我們稱這類字體為 WebFont。但是傳統(tǒng)的web開發(fā)人員的字體選擇是有限的。只有少數(shù)幾種字體可以保證在所有公共系統(tǒng)中都可以使用——這就是所謂的 Web-safe 字體。

IconFont 的使用原理: 來(lái)自于 css 的 @font-face 屬性。這個(gè)屬性用來(lái)定義一個(gè)新的字體，基本用法如下：

@font-face {
    font-family: <YourFontName>;
    src: <url> [<format>],[<source> [<format>]], *;
    [font-weight: <weight>];
    [font-style: <style>];
}

font-family：為載入的字體取名字。

src：[url]加載字體，可以是相對(duì)路徑，可以是絕對(duì)路徑，也可以是網(wǎng)絡(luò)地址。[format]定義的字體的格式，用來(lái)幫助瀏覽器識(shí)別。主要取值為：【truetype(.ttf)、opentype(.otf)、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)】。

font-weight：定義加粗樣式。

font-style：定義字體樣式。

format對(duì)應(yīng)字體格式 以及 常見兼容性寫法：

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

IconFont 的優(yōu)缺點(diǎn)：

1. 可以通過(guò)css的樣式改變其顏色(最霸氣的理由)

2. 相對(duì)于圖片來(lái)說(shuō),具有更高的分辨率

3. 更小的存儲(chǔ)

4. 缺點(diǎn):瀏覽器兼容性不夠普及,所幸目前大部分主流瀏覽器都支持

本文主要講解如何使用網(wǎng)站阿里 IconFont提供的字體圖標(biāo)

步驟分為如下4步：

1. 下載字體圖標(biāo)

2. 部署字體圖標(biāo)到我們的HTML文件中

3. 修改字體圖標(biāo)顏色及大小

4. 另一個(gè)常用的字體圖標(biāo)庫(kù)Font Awesome

一. 第一步 —— 下載字體圖標(biāo)

目標(biāo) : 通過(guò)網(wǎng)址添加所需的字體圖標(biāo)到購(gòu)物車,并登錄賬戶下載代碼

1.打開 www.iconfont.cn/

2. 輸入你要使用字體圖標(biāo)的關(guān)鍵字

3. 鼠標(biāo)移上某個(gè)圖標(biāo)以后,添加購(gòu)物車即可 

4. 如此類推,我們添加多幾個(gè)圖標(biāo),添加完以后可以點(diǎn)擊購(gòu)物車圖標(biāo)查看已添加的所有字體圖標(biāo)

5.選擇下載代碼,但是會(huì)要求你登錄賬號(hào), 推薦使用新浪微博賬號(hào)登錄

6.下載得到的是一個(gè)壓縮包,解壓即可

7. 文件簡(jiǎn)單說(shuō)明

小結(jié) : 從阿里圖標(biāo)庫(kù)中下載想要的字體圖標(biāo)到自己的電腦上,建議使用新浪微博賬號(hào)登錄。

二. 第二步 —— 部署字體圖標(biāo)到我們的HTML文件中

目標(biāo)：根據(jù)官方提供的使用說(shuō)明,部署字體圖標(biāo)到我們的HTML文件中

1. 我們把相關(guān)的字體文件都放進(jìn)一個(gè)fonts目錄下

2. 創(chuàng)建HTML頁(yè)面

3. 打開官方提供的說(shuō)明文檔,并查看具體引用步驟

4. 拷貝項(xiàng)目下面生成的 @font-face,需要注意的是字體文件的存放路徑！

      @font-face {
    font-family: 'iconfont';
    src: url('./fonts/iconfont.eot');
    src: url('./fonts/iconfont.eot?#iefix') format('embedded-opentype'),
        url('./fonts/iconfont.woff2') format('woff2'),
        url('./fonts/iconfont.woff') format('woff'),
        url('./fonts/iconfont.ttf') format('truetype'),
        url('./fonts/iconfont.svg#iconfont') format('svg');
}

6. 挑選相應(yīng)圖標(biāo)并獲取字體編碼，應(yīng)用于頁(yè)面,語(yǔ)法如下：

小結(jié) : 在HTML頁(yè)面中引入我們下載的字體圖標(biāo),可以參考官方提供的文檔,需要注意的是字體文件的存放位置。

三. 第三步 —— 修改字體圖標(biāo)顏色及大小

目標(biāo)：使用css屬性修改字體圖標(biāo)的顏色以及圖標(biāo)大小

小結(jié)：通過(guò)css的font-size以及color屬性改變字體大小以及字體顏色。

四. 第四步 —— 另一個(gè)常用的字體圖標(biāo)庫(kù)Font Awesome

目標(biāo) : 了解并使用Font Awesome

官網(wǎng): http://fontawesome.dashgame.com/

1. 引入Font Awesome 最簡(jiǎn)單的方式

/*將以下代碼粘貼到網(wǎng)頁(yè)HTML代碼的 部分*/

2. 基本圖標(biāo)

可以將Font Awesome圖標(biāo)使用在幾乎任何地方，只需要使用CSS前綴 fa ，再加上圖標(biāo)名稱。圖標(biāo)名稱可以在官網(wǎng)上找到

Font Awesome是為使用內(nèi)聯(lián)元素而設(shè)計(jì)的。我們通常更喜歡使用 ，因?yàn)樗?jiǎn)潔。 但實(shí)際上使用 才能更加語(yǔ)義化。

<!--如果您修改了圖標(biāo)容器的字體大小，圖標(biāo)大小會(huì)隨之改變。同樣的變化也會(huì)發(fā)生在顏色、陰影等其它任何CSS支持的效果上。-->

<i class="fa fa-camera-retro"></i>  fa-camera-retro

3. 大圖標(biāo)

使用 fa-lg (33%遞增)、fa-2x、 fa-3x、fa-4x，或者 fa-5x 類 來(lái)放大圖標(biāo)。

        <i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

4. 當(dāng)然還有其他用法,可以參考官網(wǎng)進(jìn)行學(xué)習(xí)

小結(jié)：通過(guò)link標(biāo)簽引入css文件,也需要注意路徑問(wèn)題,標(biāo)簽名書寫class屬性值的時(shí)候,多個(gè)class屬性值使用空格隔開。

總結(jié)

使用阿里iconfont字體圖標(biāo)的步驟如下:

1. 通過(guò)官網(wǎng)下載字體圖標(biāo)

2. 引入字體圖標(biāo)到HTML頁(yè)面中

– 使用 @font-face引入字體文件

– 定義 iconfont 類

3. 修改字體圖標(biāo)顏色以及字體圖標(biāo)大小通過(guò)css的color屬性以及font-size屬性修改字體圖標(biāo)顏色以及字體圖標(biāo)大小,需要注意的是css的優(yōu)先級(jí)和層疊性,因?yàn)樵趇confont類中也定義過(guò)font-size字體大小

4. 最后,我們又學(xué)習(xí)了另一個(gè)常用的字符圖標(biāo)庫(kù)Font Awesome,通過(guò)引入對(duì)應(yīng)的css文件,使用定義好的類名就可以得到相應(yīng)的字體圖標(biāo)了。