Iconfont 多色圖標(biāo)和漸變色圖標(biāo)的應(yīng)用 （轉(zhuǎn)自網(wǎng)絡(luò)）

2017-09-03 12:00

之前在項(xiàng)目中遇到這樣一個(gè)需求：同一個(gè)頁面支持不同主題的換膚。對(duì)于背景色、文字顏色可方便的通過CSS實(shí)現(xiàn)；一些純色小圖標(biāo)也可通過先轉(zhuǎn)換為字體圖標(biāo)，再使用CSS來設(shè)置顏色、大小。而頁面中的另一種元素——Logo是一個(gè)漸變色的圖標(biāo)，傳統(tǒng)方式是將不同主題下的Logo分別切成圖片再引入。這種方式的不便之處在于每新增一個(gè)主題，都得再次切圖。于是乎想到，Logo能否也采用字體圖標(biāo) + 實(shí)現(xiàn)漸變色，從而方便的使用CSS來設(shè)置顏色、大??？

在講述上述問題的解決方法之前，這里先簡(jiǎn)單介紹一下傳統(tǒng)小圖標(biāo)（如下圖）會(huì)涉及到的幾種使用方式。

傳統(tǒng)：圖片

最基本卻也是最不好的一種方式，一個(gè)小圖標(biāo)就是一張圖片，勢(shì)必會(huì)加大HTTP的請(qǐng)求次數(shù)，這也是網(wǎng)站性能優(yōu)化方向之一；且如果在移動(dòng)端使用，還要考慮2倍屏、3倍屏問題。當(dāng)然，最大的優(yōu)點(diǎn)在于兼容性最好。

進(jìn)一步：雪碧圖（CSS Sprites）

該方法是將網(wǎng)頁中一些背景圖片整合到一張大的圖片中，再利用CSS的背景定位來顯示需要顯示的圖片部分。

優(yōu)點(diǎn)：減少加載網(wǎng)頁圖片時(shí)對(duì)服務(wù)器的請(qǐng)求次數(shù)，從而提高頁面的加載速度；

缺點(diǎn)：小圖標(biāo)與小圖標(biāo)之間的距離要確定好，避免雪碧中相鄰的圖片被“露進(jìn)來”；如果雪碧圖足夠復(fù)雜，則大大增加了CSS代碼的編寫和維護(hù)難度。

現(xiàn)在：字體圖標(biāo)

一種比CSS雪碧圖技術(shù)更優(yōu)雅的圖標(biāo)應(yīng)用方式，比如說：Font Awesome、IcoMoon、Iconfont等。

優(yōu)點(diǎn)：

圖標(biāo)矢量化，再也不用擔(dān)心會(huì)在2倍屏、3倍屏下失真了；

本質(zhì)上是字體，所以可以用CSS來靈活控制圖標(biāo)的大小、顏色、陰影等；

各大平臺(tái)圖標(biāo)豐富，可方便找到自己需要的，如果有定制需求，可快速上傳;

文件，轉(zhuǎn)換為字體圖標(biāo)。

缺點(diǎn)：

多色圖標(biāo)的支持還不完善。

2以Iconfont為例講述字體圖標(biāo)使用

第一步：進(jìn)入Iconfont官網(wǎng)，選擇合適的圖標(biāo)（可自己上傳SVG文件生成圖標(biāo)），添加至我的項(xiàng)目中，點(diǎn)擊下載到本地，也可以直接使用在線鏈接；

第二步：使用圖標(biāo)。下載的文件中，以下三個(gè)文件分別介紹了unicode、font-class、symbol三種方式的使用，介紹的很詳細(xì)，此處不再贅述。

這里簡(jiǎn)單對(duì)比下3種引用方式：

unicode（最原始、兼容性最好Ie6+、不支持多色。）

font-class（unicode方式的變種，書寫更直觀，主要是解決unicode書寫不直觀，語意不明確的問題、兼容性良好Ie8+，不支持多色。）

symbol（兼容性較差，支持 ie9+及現(xiàn)代瀏覽器、支持多色圖標(biāo)）

一種全新的使用方式，應(yīng)該說這才是未來的主流。其實(shí)是做了一個(gè)svg的集合。

2單色圖標(biāo)、多色圖標(biāo)、漸變色圖標(biāo)的使用

單色圖標(biāo)

3種引用方式都支持，建議使用font-class方式，書寫簡(jiǎn)便且直觀。

多色圖標(biāo)

只有symbol方式支持。在symbol的引用介紹里有這樣一句話“通過一些技巧，支持像字體那樣，通過font-size，color來調(diào)整樣式。” 在自己的實(shí)踐過程種，發(fā)現(xiàn)font-size控制圖標(biāo)大小很容易實(shí)現(xiàn)，但是color調(diào)整顏色一直不成功。

幾經(jīng)研究，發(fā)現(xiàn)生成字體圖標(biāo)的SVG文件里包含了1個(gè)或多個(gè)path標(biāo)簽，而每一個(gè)path可以指定fill填充色，表現(xiàn)為該顏色填充整個(gè)path路徑，但是一旦指定了fill屬性，即使svg標(biāo)簽設(shè)置color，也不會(huì)改變path的顏色。詳見下圖：

可見：svg標(biāo)簽設(shè)置的color：red，并沒有表現(xiàn)在圖標(biāo)上。

基于此，如果想修改字體圖標(biāo)某部分顏色，有3種方式：

由設(shè)計(jì)轉(zhuǎn)化為SVG文件時(shí)，設(shè)置對(duì)應(yīng)path不填充顏色或填充為#000000；

SVG文件中找到對(duì)應(yīng)的path，去掉fill屬性，或者設(shè)置fill=”#000000”，再將該SVG文件上傳轉(zhuǎn)換成圖標(biāo)；

修改iconfont.js，找到對(duì)應(yīng)的path，去掉fill屬性。

在瀏覽器控制臺(tái)的elements里打開，表現(xiàn)為下面的形式：

接下來就可以愉快的實(shí)現(xiàn)多色圖標(biāo)的顏色修改啦～

但是注意：只有未指定fill填充色的path（可以有多個(gè)）才能響應(yīng)svg 標(biāo)簽的color。

其本質(zhì)是：svg標(biāo)簽指定的color色 渲染在所有未指定fill填充色的子path上。

使用場(chǎng)景可以是：圖標(biāo)的正常態(tài)和高亮態(tài)。

漸變色圖標(biāo)

Unicode和font-class方式支持，建議使用font-class方式。

這里利用css3背景色的漸變來實(shí)現(xiàn)。靈感來自于大神張?chǎng)涡竦囊黄恼隆禖SS3下的漸變文字效果實(shí)現(xiàn)》。先看效果：

其核心思想是下面三句話：

第一句：background: -webkit-linear-gradient(left bottom, #fb2c61 , #fac362); （通過CSS3實(shí)現(xiàn)背景色漸變效果。這里是從左下角至右上角的線性漸變。）

第二句：-webkit-background-clip: text;

（規(guī)定背景的繪制區(qū)域?yàn)槲淖植糠?。?/p>

之前接觸過的background-clip有下面幾種取值：

background-clip: border-box（默認(rèn)）｜padding-box｜c(diǎn)ontent-box;

意思分別是，背景被裁剪到邊框盒 |?背景被裁剪到內(nèi)邊距框｜背景被裁剪到內(nèi)容框。

background-clip與box-sizing感覺有異曲同工之妙～

第三句：-webkit-text-fill-color: transparent;

（文字填充顏色）

＊這里注意一定要定義為transparent，否則會(huì)覆蓋底部的背景色。

這里使用了-webkit-前綴，Chrome和Safari能夠正常使用，經(jīng)測(cè)試新版firefox也能正常使用。所以，如果有兼容性需求，這種方式就要謹(jǐn)慎使用了。