2020-2-1 seo達(dá)人
一、什么是字體圖標(biāo)
字體圖標(biāo)：簡(jiǎn)單的說(shuō)，就是一種特殊的字體，通過(guò)這種字體，顯示給用戶的就像一個(gè)個(gè)圖片一樣，但它的本質(zhì)是文字。目前在移動(dòng)端應(yīng)用比較廣泛！
二、字體圖標(biāo)的使用步驟
這里以阿里巴巴矢量圖標(biāo)庫(kù)為例！！！
sep1：
百度搜索iconfont,找到阿里巴巴矢量圖標(biāo)庫(kù)官網(wǎng)
網(wǎng)址在這里https://www.iconfont.cn/
進(jìn)去之后注冊(cè)或登錄，共有3種登錄方式，在這里我使用新浪微博賬號(hào)登錄
好了，登錄之后我們就可以在里面選擇自己想要的字體圖標(biāo)啦！！！那么，如何選擇下載并應(yīng)用到自己的項(xiàng)目中呢？？別著急，跟著我走！
sep2：下載字體圖標(biāo)字體庫(kù)
在這里我們可以根據(jù)自己的需求輸入相應(yīng)的關(guān)鍵字進(jìn)行搜索（中英文都可以）
鼠標(biāo)放上去，然后就可以把自己喜歡的寶貝加入購(gòu)物車?yán)玻?br />
網(wǎng)購(gòu)的趕腳有木有，
我知道，看到這里大家就該有疑問(wèn)了，
還要花錢買嗎？
放心！
答案是：不需要！
我們選的東西都在購(gòu)物車?yán)锢玻?br />
打開購(gòu)物車，就能看到你選的圖標(biāo)了！！
接下來(lái)你要做的是把它們下載到本地。
由于要在網(wǎng)頁(yè)中使用
在這里我們選擇 下載代碼
下載后將壓縮包解壓，為了方便后續(xù)使用我們改一下文件夾名稱，在這里我改為 icon (注意：在HTML中導(dǎo)入路徑時(shí)，記得帶上你所改的文件夾名稱)
打開之后你會(huì)發(fā)現(xiàn)里面有不同類型的文件（建議都不要?jiǎng)h除）
打開后綴名為.html的這個(gè)文件（可以更直觀地查看自己下載的字體圖標(biāo)）
step3：在項(xiàng)目中引用字體圖標(biāo)
不要走開，重點(diǎn)來(lái)了！！！
官方提供了三種引用方法（下面對(duì)應(yīng)的都有步驟）
Unicode 引用
Unicode 是字體在網(wǎng)頁(yè)端最原始的應(yīng)用方式，特點(diǎn)是：
兼容性最好，支持 IE6+，及所有現(xiàn)代瀏覽器。
支持按字體的方式去動(dòng)態(tài)調(diào)整圖標(biāo)大小，顏色等等。
但是因?yàn)槭亲煮w，所以不支持多色。只能使用平臺(tái)里單色的圖標(biāo)，就算項(xiàng)目里有多色圖標(biāo)也會(huì)自動(dòng)去色。
注意：新版 iconfont 支持多色圖標(biāo)，這些多色圖標(biāo)在 Unicode 模式下將不能使用，如果有需求建議使用symbol 的引用方式
Unicode 使用步驟如下
第一步：拷貝項(xiàng)目下面生成的 @font-face
@font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff2') format('woff2'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg'); }
第二步：定義使用 iconfont 的樣式
.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
第三步：挑選相應(yīng)圖標(biāo)并獲取字體編碼，應(yīng)用于頁(yè)面
<span class="iconfont">3</span>
font-class 引用
font-class 是 Unicode 使用方式的一種變種，主要是解決 Unicode 書寫不直觀，語(yǔ)意不明確的問(wèn)題。
與 Unicode 使用方式相比，具有如下特點(diǎn)：
兼容性良好，支持 IE8+，及所有現(xiàn)代瀏覽器。
相比于 Unicode 語(yǔ)意明確，書寫更直觀。可以很容易分辨這個(gè) icon 是什么。
因?yàn)槭褂?class 來(lái)定義圖標(biāo)，所以當(dāng)要替換圖標(biāo)時(shí)，只需要修改 class 里面的 Unicode 引用。
不過(guò)因?yàn)楸举|(zhì)上還是使用的字體，所以多色圖標(biāo)還是不支持的。
使用步驟如下：
第一步：引入項(xiàng)目下面生成的 fontclass 代碼：
<link rel="stylesheet" href="./iconfont.css">
第二步：挑選相應(yīng)圖標(biāo)并獲取類名，應(yīng)用于頁(yè)面：
<span class="iconfont icon-xxx"></span>
symbol 引用
這是一種全新的使用方式，應(yīng)該說(shuō)這才是未來(lái)的主流，也是平臺(tái)目前推薦的用法。相關(guān)介紹可以參考這篇文章 這種用法其實(shí)是做了一個(gè) SVG 的集合，與另外兩種相比具有如下特點(diǎn)：
支持多色圖標(biāo)了，不再受單色限制。
通過(guò)一些技巧，支持像字體那樣，通過(guò) font-size, color 來(lái)調(diào)整樣式。
兼容性較差，支持 IE9+，及現(xiàn)代瀏覽器。
瀏覽器渲染 SVG 的性能一般，還不如 png。
使用步驟如下:
第一步：引入項(xiàng)目下面生成的 symbol 代碼：
<script src="./iconfont.js"></script>
第二步：加入通用 CSS 代碼（引入一次就行）：
<style> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>
第三步：挑選相應(yīng)圖標(biāo)并獲取類名，應(yīng)用于頁(yè)面：
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg>
下面，我就跟大家詳細(xì)說(shuō)說(shuō) font-class 引用的引用方式：
打開編輯器（在這里我使用的是 VS Code編輯器），新建一個(gè)項(xiàng)目文件夾(demo)
將解壓后的字體圖標(biāo)文件夾（icon）直接放到demo目錄下
在demo文件夾下面新建一個(gè)html文件 demo.html
導(dǎo)入icon文件夾里面的外部樣式表
<link rel="stylesheet" href="./icon/iconfont.css">
iconfont.css 里面就是我們下載的字體圖標(biāo)的所有css樣式了，我們打開看看吧！
你會(huì)發(fā)現(xiàn)里面有一個(gè) iconfont類名（這里劃重點(diǎn)！后面要用），它是所有字體圖標(biāo)的公用樣式。
這時(shí)我們就可以在頁(yè)面中使用這些字體圖標(biāo)啦！上面我們只是導(dǎo)入了整個(gè)css樣式表，現(xiàn)在我們要針對(duì)性地把某個(gè)圖標(biāo)引用到html頁(yè)面中，并在網(wǎng)頁(yè)中顯示出來(lái)。
下面 我們就開始寫頁(yè)面的主體部分吧！
<p> 我有一個(gè)夢(mèng)想：能夠擁有一套 <span class="iconfont icon-home"></span> </p>
這里的span標(biāo)簽里面放的就是要用的某個(gè)字體圖標(biāo)了，你會(huì)發(fā)現(xiàn)它用了兩個(gè)class類名。
第一個(gè)是iconfont，也就是我前面劃的重點(diǎn)（到這里不明白的話，可以再回頭看看）
第二個(gè)是icon-home，這個(gè)類名從何而來(lái)呢？
來(lái)，繼續(xù)往下看，再次打開icon文件夾下的
話不多說(shuō)，直接看圖
是不是對(duì)應(yīng)上啦！簡(jiǎn)單地說(shuō)就是你要用那個(gè)圖標(biāo)就添加它的class類名。
到這里，恭喜你已經(jīng)學(xué)會(huì)了如何在網(wǎng)頁(yè)中插入字體圖標(biāo)啦！！！
那么，趕快運(yùn)行一下看看效果吧！
到這里是不是還滿足不了你的需求，會(huì)有這樣的疑問(wèn)：如果是這樣的效果，跟一張圖片有什么區(qū)別呢？？？
當(dāng)然不是啦！
之所以叫做字體圖標(biāo)，顧名思義，它在網(wǎng)頁(yè)中就是一種字體的存在，不過(guò)它比普通字體長(zhǎng)得好看些有木有！
我們可以像更改文字樣式一樣去更改它的樣式，比如說(shuō) 大小、顏色、陰影…
Symbol 引用方式還可以實(shí)現(xiàn)下面原圖標(biāo)的彩色效果哦！可以自己照著官方提供的步驟試試看
下面附上Font class引用方法的 源代碼 供參考
前面的步驟一定要看！！！
如果前期工作沒(méi)做的話，直接用我的源代碼是實(shí)現(xiàn)不了的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字體圖標(biāo)</title>
<link rel="stylesheet" href="./icon/iconfont.css">
<style>
.iconfont{
font-size: 200px;
color: palevioletred;
text-shadow: 18px 17px 17px gray;
}
</style>
</head>
<body>
<p>
我有一個(gè)夢(mèng)想：能夠擁有一套
<span class="iconfont icon-home"></span>
</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
花費(fèi)了很長(zhǎng)時(shí)間整理出來(lái)的。
很簡(jiǎn)單是不是！！！
看到這里還不會(huì)的話，建議重新再看一遍！
其中有錯(cuò)誤的話，還請(qǐng)指出，我會(huì)虛心接受并改正！！！
————————————————
版權(quán)聲明：本文為CSDN博主「Humy.」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_42678796/article/details/104569773
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.gerard.com.cn