更新時(shí)間:2021-12-08 來(lái)源:黑馬程序員 瀏覽量:
iconfont字體圖標(biāo)可以為前端工程師提供一種方便高效的圖標(biāo)使用方式,展示的是圖標(biāo),本質(zhì)屬于字體。當(dāng)我們遇到一些結(jié)構(gòu)和樣式比較簡(jiǎn)單的小圖標(biāo),就可以使用字體圖標(biāo)。
字體圖標(biāo)優(yōu)點(diǎn):
輕量級(jí):一個(gè)圖標(biāo)字體要比一系列的圖像要小。一旦字體加載了,圖標(biāo)就會(huì)馬上渲染出來(lái),減少了服務(wù)器請(qǐng)求。
靈活性:本質(zhì)其實(shí)是文字,可以很隨意的改變顏色、產(chǎn)生陰影、透明效果、旋轉(zhuǎn)等
兼容性:幾乎支持所有的瀏覽器,請(qǐng)放心使用
字體圖標(biāo)不能替代精靈技術(shù),只是對(duì)工作中圖標(biāo)部分技術(shù)的提升和優(yōu)化。是一些網(wǎng)頁(yè)常見(jiàn)的小圖標(biāo),我們直接網(wǎng)上下載即可。 因此使用字體圖標(biāo)可以分為下載、引入、追加(以后添加新的小圖標(biāo))三步。
1.字體圖標(biāo)的下載
推薦下載網(wǎng)站:
icomoon 字庫(kù) http://icomoon.io 推薦指數(shù) ★★★★★
IcoMoon 成立于 2011 年,推出了第一個(gè)自定義圖標(biāo)字體生成器,它允許用戶選擇所需要的圖標(biāo),使它們成一字型。該字庫(kù)內(nèi)容種類繁多,非常全面,唯一的遺憾是國(guó)外服務(wù)器,打開(kāi)網(wǎng)速較慢。
阿里 iconfont 字庫(kù) http://www.iconfont.cn/ 推薦指數(shù) ★★★★★
這個(gè)是阿里媽媽 M2UX 的一個(gè) iconfont 字體圖標(biāo)字庫(kù),包含了淘寶圖標(biāo)庫(kù)和阿里媽媽圖標(biāo)庫(kù)??梢允褂?AI制作圖標(biāo)上傳生成。 重點(diǎn)是,免費(fèi)!
2.字體圖標(biāo)的引入
下載完畢之后,注意原先的文件不要?jiǎng)h,后面會(huì)用。把下載包里面的 fonts 文件夾放入頁(yè)面根目錄下
不同瀏覽器所支持的字體格式是不一樣的,字體圖標(biāo)之所以兼容,就是因?yàn)榘酥髁鳛g覽器支持的字體文件。
TureType(.ttf)格式.ttf字體是Windows和Mac的最常見(jiàn)的字體,支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+;
Web Open Font Format(.woff)格式woff字體,支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+;
Embedded Open Type(.eot)格式.eot字體是IE專用字體,支持這種字體的瀏覽器有IE4+;
SVG(.svg)格式.svg字體是基于SVG字體渲染的一種格式,支持這種字體的瀏覽器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+;
在 CSS 樣式中全局聲明字體: 簡(jiǎn)單理解把這些字體文件通過(guò)css引入到我們頁(yè)面中。一定注意字體文件路徑的問(wèn)題。
@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?7kkyc2'); src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2') format('woff'), url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg'); font-weight: normal; font-style: normal; }
3.字體圖標(biāo)的添加
首先在html 標(biāo)簽內(nèi)添加小圖標(biāo)。
<span> </span>
給標(biāo)簽定義字體。
span { font-family: "icomoon"; }
務(wù)必保證這個(gè)字體和上面@font-face里面的字體保持一致
4.字體圖標(biāo)的追加
如果工作中,原來(lái)的字體圖標(biāo)不夠用了,我們需要添加新的字體圖標(biāo)到原來(lái)的字體文件中。 把壓縮包里面的selection.json 從新上傳,然后選中自己想要新的圖標(biāo),從新下載壓縮包,并替換原來(lái)的文件即可。
ionic如何實(shí)現(xiàn)圖標(biāo)類樣式?