阿里巴巴矢量圖標(biāo)庫(kù)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用
前言：想要寫出一篇引人入勝的文章？我們特意為您整理了阿里巴巴矢量圖標(biāo)庫(kù)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用范文，希望能給你帶來(lái)靈感和參考，敬請(qǐng)閱讀。
【摘要】當(dāng)今眾多的Web前端設(shè)計(jì)都采用了阿里巴巴矢量圖標(biāo)庫(kù)來(lái)制作網(wǎng)頁(yè)中的小圖標(biāo)，圖標(biāo)庫(kù)是開放的，可以在線或下載使用。而這一技術(shù)在很多《網(wǎng)頁(yè)設(shè)計(jì)》教材中未曾提及，本文就來(lái)介紹一下阿里巴巴矢量圖標(biāo)庫(kù)的使用方法，作為對(duì)《網(wǎng)頁(yè)設(shè)計(jì)》課程教學(xué)內(nèi)容的一個(gè)補(bǔ)充。
【關(guān)鍵詞】矢量圖標(biāo)；web前端；網(wǎng)頁(yè)設(shè)計(jì)
1引言
阿里巴巴公司推出的Webfont形式的矢量圖標(biāo)庫(kù)網(wǎng)站，其中涵蓋了1006860多個(gè)常用圖標(biāo)并且還在持續(xù)更新中。Iconfont平臺(tái)為用戶提供圖標(biāo)分撿下載、矢量格式轉(zhuǎn)換、在線圖標(biāo)搜索、在線儲(chǔ)存、個(gè)人圖標(biāo)庫(kù)管理及項(xiàng)目圖標(biāo)管理等基礎(chǔ)功能。網(wǎng)頁(yè)中引入的圖標(biāo)是作為字體形式插入，可以自由修改顏色，自由變換大小，也可以添加透明度、陰影、旋轉(zhuǎn)等視覺(jué)效果，并且在布局方面也非常方便。
2矢量圖標(biāo)的下載
進(jìn)入官方網(wǎng)站后，在搜索框中輸入搜索關(guān)鍵字進(jìn)行搜索，比如輸入：“魚”，就會(huì)出現(xiàn)代表“魚”的圖標(biāo)，這個(gè)圖標(biāo)會(huì)有很多，有黑白色的也有彩色的，我們都可以選擇使用。當(dāng)我們需要下載多個(gè)小圖標(biāo)時(shí)，可將選好的圖標(biāo)統(tǒng)一加入購(gòu)物車，加入好購(gòu)物車以后點(diǎn)擊下載代碼即可，此時(shí)需要我們登錄。網(wǎng)站提供了3種登錄方式，其中阿里域帳號(hào)是內(nèi)部管理帳號(hào)，可以使用新浪微博帳號(hào)和Gthub帳號(hào)登錄。
3unicode方式調(diào)用矢量圖標(biāo)
按照下載文件中demo_unicode.html頁(yè)面內(nèi)容的提示進(jìn)行調(diào)用。例如調(diào)用美女和魚圖標(biāo)（圖1），我們書寫的HTML代碼是：<iclass="iconfontmeinv"></i><br/><iclass="iconfont"></i>調(diào)用后，運(yùn)行結(jié)果如圖2給class為meinv的圖標(biāo)書寫以下樣式，運(yùn)行后效果如圖3.meinv{font-size:100px;font-style:italic;color:orange;border:1pxsolidblue;unicode是字體在網(wǎng)頁(yè)端最原始的應(yīng)用方式，它的特點(diǎn)是兼容所有的瀏覽器，支持ie6+；支持按字體的方式去動(dòng)態(tài)調(diào)整圖標(biāo)大小，顏色等等；不支持多色圖標(biāo)。
4fontclass方式調(diào)用矢量圖標(biāo)
按照下載文件中demo_fontclass.html頁(yè)面內(nèi)容的提示進(jìn)行調(diào)用。例如調(diào)用購(gòu)物車和魚圖標(biāo)（圖4），我們書寫的HTML代碼是：<iclass="iconfonticon-gouwuche"></i><br/><iclass="iconfonticon-yu2"></i>調(diào)用后font-class是unicode使用方式的一種變種，主要是解決u－nicode書寫不直觀，語(yǔ)意不明確的問(wèn)題。與unicode使用方式相比，具有如下特點(diǎn)：兼容性良好，支持ie8+，及所有現(xiàn)代瀏覽器。相比于uni－code語(yǔ)意明確，書寫更直觀?？梢院苋菀追直孢@個(gè)icon是什么。因?yàn)槭褂胏lass來(lái)定義圖標(biāo)，所以當(dāng)要替換圖標(biāo)時(shí)，只需要修改class里面的unicode引用。不過(guò)因?yàn)楸举|(zhì)上還是使用的字體，所以多色圖標(biāo)還是不支持的。
5symbol方式調(diào)用矢量圖標(biāo)
按照下載文件中demo_symbol.html頁(yè)面內(nèi)容的提示進(jìn)行調(diào)用。例如調(diào)用購(gòu)物車和魚圖標(biāo)（圖6），我們書寫的HTML代碼是：<svgclass="icon"aria-hidden="true""><usexlink:href="http://#icon-gouwuche"></use></svg><svgclass="icon"aria-hidden="true""><usexlink:href="http://#icon-yu"></use></svg>調(diào)用后，運(yùn)行結(jié)果如圖7，如果需要增加樣式，則樣式代碼作用在<svg></svg>標(biāo)簽上。symbol是一種全新的使用方式，應(yīng)該說(shuō)這才是未來(lái)的主流，也是平臺(tái)目前推薦的用法。這種用法其實(shí)是做了一個(gè)svg的集合，與另外兩種相比具有如下特點(diǎn)：支持多色圖標(biāo)了，不再受單色限制。通過(guò)一些技巧，支持像字體那樣，通過(guò)font-size,color來(lái)調(diào)整樣式。兼容性較差，支持ie9+,及現(xiàn)代瀏覽器。瀏覽器渲染svg的性能一般，還不如png。總結(jié)：雖然現(xiàn)在有了iconfont資源庫(kù)，但它還不是萬(wàn)能的，畢竟它不能100%滿足我們的需求，有時(shí)候我們需要一些特別icon圖標(biāo)，就需要我們自己制作了。目前我們?cè)赪eb前端工作中最需要了解的是svg格式的圖標(biāo)，一些門戶網(wǎng)站已經(jīng)開始運(yùn)用到了這個(gè)技術(shù)。同時(shí)通過(guò)文本的介紹，希望將此技術(shù)加入到《網(wǎng)頁(yè)設(shè)計(jì)》授課內(nèi)容中。
參考文獻(xiàn)：
［1］吳恩華;圖形處理器用于通用計(jì)算的技術(shù)、現(xiàn)狀及其挑戰(zhàn)［J］;軟件學(xué)報(bào);2004年10期
［2］黃晶慧;顏色與點(diǎn)圖標(biāo)方法的可視化［J］;《電腦知識(shí)與技術(shù)》;2015(1):153-156
作者:李可 單位:寧波職業(yè)技術(shù)學(xué)院