公務(wù)員期刊網(wǎng) 論文中心 正文

阿里巴巴矢量圖標庫在網(wǎng)頁設(shè)計中的應(yīng)用

前言:想要寫出一篇引人入勝的文章?我們特意為您整理了阿里巴巴矢量圖標庫在網(wǎng)頁設(shè)計中的應(yīng)用范文,希望能給你帶來靈感和參考,敬請閱讀。

阿里巴巴矢量圖標庫在網(wǎng)頁設(shè)計中的應(yīng)用

【摘要】當今眾多的Web前端設(shè)計都采用了阿里巴巴矢量圖標庫來制作網(wǎng)頁中的小圖標,圖標庫是開放的,可以在線或下載使用。而這一技術(shù)在很多《網(wǎng)頁設(shè)計》教材中未曾提及,本文就來介紹一下阿里巴巴矢量圖標庫的使用方法,作為對《網(wǎng)頁設(shè)計》課程教學內(nèi)容的一個補充。

【關(guān)鍵詞】矢量圖標;web前端;網(wǎng)頁設(shè)計

1引言

阿里巴巴公司推出的Webfont形式的矢量圖標庫網(wǎng)站,其中涵蓋了1006860多個常用圖標并且還在持續(xù)更新中。Iconfont平臺為用戶提供圖標分撿下載、矢量格式轉(zhuǎn)換、在線圖標搜索、在線儲存、個人圖標庫管理及項目圖標管理等基礎(chǔ)功能。網(wǎng)頁中引入的圖標是作為字體形式插入,可以自由修改顏色,自由變換大小,也可以添加透明度、陰影、旋轉(zhuǎn)等視覺效果,并且在布局方面也非常方便。

2矢量圖標的下載

進入官方網(wǎng)站后,在搜索框中輸入搜索關(guān)鍵字進行搜索,比如輸入:“魚”,就會出現(xiàn)代表“魚”的圖標,這個圖標會有很多,有黑白色的也有彩色的,我們都可以選擇使用。當我們需要下載多個小圖標時,可將選好的圖標統(tǒng)一加入購物車,加入好購物車以后點擊下載代碼即可,此時需要我們登錄。網(wǎng)站提供了3種登錄方式,其中阿里域帳號是內(nèi)部管理帳號,可以使用新浪微博帳號和Gthub帳號登錄。

3unicode方式調(diào)用矢量圖標

按照下載文件中demo_unicode.html頁面內(nèi)容的提示進行調(diào)用。例如調(diào)用美女和魚圖標(圖1),我們書寫的HTML代碼是:<iclass="iconfontmeinv">&#xe605;</i><br/><iclass="iconfont">&#xe6b4;</i>調(diào)用后,運行結(jié)果如圖2給class為meinv的圖標書寫以下樣式,運行后效果如圖3.meinv{font-size:100px;font-style:italic;color:orange;border:1pxsolidblue;unicode是字體在網(wǎng)頁端最原始的應(yīng)用方式,它的特點是兼容所有的瀏覽器,支持ie6+;支持按字體的方式去動態(tài)調(diào)整圖標大小,顏色等等;不支持多色圖標。

4fontclass方式調(diào)用矢量圖標

按照下載文件中demo_fontclass.html頁面內(nèi)容的提示進行調(diào)用。例如調(diào)用購物車和魚圖標(圖4),我們書寫的HTML代碼是:<iclass="iconfonticon-gouwuche"></i><br/><iclass="iconfonticon-yu2"></i>調(diào)用后font-class是unicode使用方式的一種變種,主要是解決u-nicode書寫不直觀,語意不明確的問題。與unicode使用方式相比,具有如下特點:兼容性良好,支持ie8+,及所有現(xiàn)代瀏覽器。相比于uni-code語意明確,書寫更直觀??梢院苋菀追直孢@個icon是什么。因為使用class來定義圖標,所以當要替換圖標時,只需要修改class里面的unicode引用。不過因為本質(zhì)上還是使用的字體,所以多色圖標還是不支持的。

5symbol方式調(diào)用矢量圖標

按照下載文件中demo_symbol.html頁面內(nèi)容的提示進行調(diào)用。例如調(dià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)用后,運行結(jié)果如圖7,如果需要增加樣式,則樣式代碼作用在<svg></svg>標簽上。symbol是一種全新的使用方式,應(yīng)該說這才是未來的主流,也是平臺目前推薦的用法。這種用法其實是做了一個svg的集合,與另外兩種相比具有如下特點:支持多色圖標了,不再受單色限制。通過一些技巧,支持像字體那樣,通過font-size,color來調(diào)整樣式。兼容性較差,支持ie9+,及現(xiàn)代瀏覽器。瀏覽器渲染svg的性能一般,還不如png??偨Y(jié):雖然現(xiàn)在有了iconfont資源庫,但它還不是萬能的,畢竟它不能100%滿足我們的需求,有時候我們需要一些特別icon圖標,就需要我們自己制作了。目前我們在Web前端工作中最需要了解的是svg格式的圖標,一些門戶網(wǎng)站已經(jīng)開始運用到了這個技術(shù)。同時通過文本的介紹,希望將此技術(shù)加入到《網(wǎng)頁設(shè)計》授課內(nèi)容中。

參考文獻:

[1]吳恩華;圖形處理器用于通用計算的技術(shù)、現(xiàn)狀及其挑戰(zhàn)[J];軟件學報;2004年10期

[2]黃晶慧;顏色與點圖標方法的可視化[J];《電腦知識與技術(shù)》;2015(1):153-156

作者:李可 單位:寧波職業(yè)技術(shù)學院

精選范文推薦