首頁技術(shù)文章正文

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

更新時間:2019年01月22日16時25分來源:傳智播客瀏覽次數(shù):

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

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

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

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

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

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

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

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

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

font-weight：定義加粗樣式。

font-style：定義字體樣式。

format對應(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)缺點：

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

2. 相對于圖片來說,具有更高的分辨率

3. 更小的存儲

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

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

步驟分為如下4步：

1. 下載字體圖標

2. 部署字體圖標到我們的HTML文件中

3. 修改字體圖標顏色及大小

4. 另一個常用的字體圖標庫Font Awesome

一. 第一步 —— 下載字體圖標

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

1.打開 www.iconfont.cn/

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

3. 鼠標移上某個圖標以后,添加購物車即可

4. 如此類推,我們添加多幾個圖標,添加完以后可以點擊購物車圖標查看已添加的所有字體圖標

5.選擇下載代碼,但是會要求你登錄賬號, 推薦使用新浪微博賬號登錄

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

7. 文件簡單說明

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

二. 第二步 —— 部署字體圖標到我們的HTML文件中

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

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

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

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

4. 拷貝項目下面生成的 @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');
}