2020-2-1 seo達(dá)人
一、什么是字體圖標(biāo)
字體圖標(biāo):簡(jiǎn)單的說(shuō),就是一種特殊的字體,通過這種字體,顯示給用戶的就像一個(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)的趕腳有木有,
我知道,看到這里大家就該有疑問了,
還要花錢買嗎?
放心!
答案是:不需要!
我們選的東西都在購(gòu)物車?yán)锢玻?br />
打開購(gòu)物車,就能看到你選的圖標(biāo)了?。?br />
接下來(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ǔ)意不明確的問題。
與 Unicode 使用方式相比,具有如下特點(diǎn):
兼容性良好,支持 IE8+,及所有現(xiàn)代瀏覽器。
相比于 Unicode 語(yǔ)意明確,書寫更直觀??梢院苋菀追直孢@個(gè) icon 是什么。
因?yàn)槭褂?class 來(lái)定義圖標(biāo),所以當(dāng)要替換圖標(biāo)時(shí),只需要修改 class 里面的 Unicode 引用。
不過因?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)了,不再受單色限制。
通過一些技巧,支持像字體那樣,通過 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ì)有這樣的疑問:如果是這樣的效果,跟一張圖片有什么區(qū)別呢???
當(dāng)然不是啦!
之所以叫做字體圖標(biāo),顧名思義,它在網(wǎng)頁(yè)中就是一種字體的存在,不過它比普通字體長(zhǎng)得好看些有木有!
我們可以像更改文字樣式一樣去更改它的樣式,比如說(shuō) 大小、顏色、陰影…
Symbol 引用方式還可以實(shí)現(xiàn)下面原圖標(biāo)的彩色效果哦!可以自己照著官方提供的步驟試試看
下面附上Font class引用方法的 源代碼 供參考
前面的步驟一定要看?。?!
如果前期工作沒做的話,直接用我的源代碼是實(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://m.820esy.cn