成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

像打字一樣插入圖標(biāo)-iconfont

warkiz / 1192人閱讀

摘要：簡介是什么就像名字一樣，就是圖標(biāo)字體，像雅黑字體，思源字體一樣，這種字體就是由圖標(biāo)構(gòu)成有何優(yōu)勢(shì)輕量性一個(gè)圖標(biāo)字體比一系列的圖像特別是在屏中使用雙倍圖像要小。問題很小創(chuàng)作自已的字體圖標(biāo)很費(fèi)時(shí)間，重構(gòu)人員后期維護(hù)的成本偏高。

簡介

- iconfont是什么？

就像名字一樣，iconfont就是圖標(biāo)字體，像雅黑字體，思源字體一樣，這種字體就是由圖標(biāo)構(gòu)成~

- 有何優(yōu)勢(shì)？

1、輕量性：一個(gè)圖標(biāo)字體比一系列的圖像（特別是在Retina屏中使用雙倍圖像）要小。一旦圖標(biāo)字體加載了，圖標(biāo)就會(huì)馬上渲染出來，不需要下載一個(gè)圖像。可以減少HTTP請(qǐng)求，還可以配合HTML5離線存儲(chǔ)做性能優(yōu)化。

2、靈活性：圖標(biāo)字體可以用過font-size屬性設(shè)置其任何大小，還可以加各種文字效果，包括顏色、Hover狀態(tài)、透明度、陰影和翻轉(zhuǎn)等效果?？梢栽谌魏伪尘跋嘛@示。使用位圖的話，必須得為每個(gè)不同大小和不同效果的圖像輸出一個(gè)不同文件。

3、兼容性：網(wǎng)頁字體支持所有現(xiàn)代瀏覽器，包括IE低版本。詳細(xì)兼容性可以點(diǎn)擊這里。

- 有何劣勢(shì)？

1、圖標(biāo)字體只能被渲染成單色或者CSS3的漸變色。（問題很小,不要慌）

2、使用版權(quán)上有限制，有好多字體是收費(fèi)的。當(dāng)然也有很多免費(fèi)開源的精美字體圖標(biāo)供下載使用。（問題很?。?/p>

3、創(chuàng)作自已的字體圖標(biāo)很費(fèi)時(shí)間，重構(gòu)人員后期維護(hù)的成本偏高。（問題很?。?/p>

基于上面的分析，可以看出iconfont基本沒有劣勢(shì)（滑稽）。

那么這么好的東西，哪里才能買到呢？

使用方法

此文使用阿里媽媽的圖標(biāo)庫。

步驟1：進(jìn)入網(wǎng)站。

點(diǎn)擊桌面上的瀏覽器，輸入 http://www.iconfont.cn/ ，吧唧一聲敲下回車

步驟2：選擇自己喜歡的圖標(biāo)，點(diǎn)擊購物車的按鈕。

步驟3：選擇完畢后，點(diǎn)擊右上角的購物車按鈕。

步驟4：點(diǎn)擊添加到項(xiàng)目，如果沒有項(xiàng)目則新建一個(gè)項(xiàng)目（“加入項(xiàng)目”按鈕右邊有一個(gè)淺灰色按鈕），點(diǎn)擊確定

步驟5：點(diǎn)擊下載到本地。

步驟6：點(diǎn)開下載到的文件，點(diǎn)擊demo。

步驟7：查看上面的教程即可~嘿嘿嘿

三種不同引用的區(qū)別和注意事項(xiàng)！

unicode引用

特點(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)去色。

注意：
這里src中需要填寫對(duì)應(yīng)路徑，你下載到的文件（上一步驟叫你下載的）中名為iconfont的eot,woff,ttf,svg類型的文件都要扔進(jìn)vue項(xiàng)目中

font-class引用

與unicode使用方式相比，具有如下特點(diǎn)：
-兼容性良好，支持ie8+，及所有現(xiàn)代瀏覽器。
-相比于unicode語意明確，書寫更直觀?？梢院苋菀追直孢@個(gè)icon是什么。
-因?yàn)槭褂胏lass來定義圖標(biāo)，所以當(dāng)要替換圖標(biāo)時(shí)，只需要修改class里面的unicode引用。
-不過因?yàn)楸举|(zhì)上還是使用的字體，所以多色圖標(biāo)還是不支持的。

注意:
使用這種引用只需要將下載到的文件中名為iconfont類型為css,svg,ttf,eot的文件扔進(jìn)vue項(xiàng)目中即可

symbol引用

這是一種全新的使用方式，應(yīng)該說這才是未來的主流，也是平臺(tái)目前推薦的用法。這種用法其實(shí)是做了一個(gè)svg的集合，與另外兩種相比具有如下特點(diǎn)：
-支持多色圖標(biāo)了，不再受單色限制。
-通過一些技巧，支持像字體那樣，通過font-size,color來調(diào)整樣式。
-兼容性較差，支持 ie9+,及現(xiàn)代瀏覽器。
-瀏覽器渲染svg的性能一般，還不如png。

注意：
-使用這種引用只需要將下載到的文件中名為iconfont.js文件扔進(jìn)vue項(xiàng)目中即可
-當(dāng)從阿里圖庫中圖標(biāo)被添加至項(xiàng)目，如果編輯過項(xiàng)目圖標(biāo)的顏色或者圖標(biāo)本身是有顏色的，那么在通過symbol獲取圖標(biāo)時(shí)會(huì)在svg的path中增加fill屬性，導(dǎo)致無法更改顏色，如果需要?jiǎng)討B(tài)修改顏色，需要這樣操作

css操作圖標(biāo)

經(jīng)過我們上面一些步驟的操作呢 我相信 你已經(jīng)能看到這條咸魚了。

.icon-xia{
  font-size: 40px; // fontsize多大 寬高就多大
  vertical-align: middle; //這個(gè)行內(nèi)垂直居中簡直不要太舒服
  color: red;//改變顏色
  opacity:.6;//改變透明度
  ...//沒錯(cuò)，操作起來就像字體一樣，縱享絲滑
}
最后

謝謝大家，有問題請(qǐng)?jiān)谠u(píng)論區(qū)指出

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114022.html

相關(guān)文章

  • iconfont 介紹

    摘要：最早走出扁平化設(shè)計(jì)的是微軟，在年推出的，就用了大量的簡單形狀，移除了復(fù)雜的樣式和紋理。但是它有個(gè)問題就是，雪碧圖比較適合固定功能的網(wǎng)站。而且目前我們公司網(wǎng)站設(shè)計(jì)全部使用，我都好久沒打開過了，對(duì)于來說，雪碧圖位置的標(biāo)識(shí)也是個(gè)挺麻煩的事情。 最近公司的設(shè)計(jì)人員想要把網(wǎng)站上面的小圖標(biāo)都改為iconfont，我也做了一篇PPT分享給大家，如果現(xiàn)在不記下來，可能過幾個(gè)月就忘得一干二凈了 一· 現(xiàn)...

    huayeluoliuhen 評(píng)論0 收藏0

  • 字體圖標(biāo)的使用

    摘要：字體圖標(biāo)的不足既然字體圖標(biāo)那么有效率，那么為什么不都使用字體圖標(biāo)呢現(xiàn)在的限制主要是字體圖標(biāo)的開發(fā)要求比較高，畢竟是開發(fā)一種字體。自己開發(fā)字體圖標(biāo)很累，幸好有很多樂于分享的，現(xiàn)在有很多網(wǎng)站把一些常用的圖標(biāo)都做成了字體圖標(biāo)分享了出來。目錄 字體圖標(biāo)的介紹 iconfont的使用 基于unicode的用法： ...

    shuibo 評(píng)論0 收藏0

  • 在react-native中添加高可維護(hù)的iconfont字體

    摘要：沒關(guān)系，筆者已經(jīng)為你們準(zhǔn)備好了，請(qǐng)保存到文件中，假設(shè)你的文件名叫和你剛才保存的字體文件在一起，方便管理復(fù)制字體這個(gè)插件包有好多套字體，我們可以需要把自己的也復(fù)制到包中對(duì)應(yīng)文件夾，當(dāng)然了，不可能手動(dòng)復(fù)制，筆者從來都是解放雙手的。 字體圖標(biāo)盛行的年代，在項(xiàng)目里使用一套不失真又可以隨意改變大小顏色的圖標(biāo)，是多么舒服的一件事。這里要推薦iconfont.cn，超多免費(fèi)圖標(biāo)，當(dāng)然了，你的專屬美工...

    CarterLi 評(píng)論0 收藏0

  • iconfont實(shí)踐小結(jié)

    摘要：所以實(shí)現(xiàn)小圖標(biāo)時(shí)雪碧圖跟圖標(biāo)字體會(huì)在一個(gè)網(wǎng)站共存，自定義圖標(biāo)字體為什么比較耗時(shí)，且太復(fù)雜圖標(biāo)無法實(shí)現(xiàn)請(qǐng)往下看開發(fā)流程就了解了。參考資料細(xì)談淺談圖標(biāo)字體向下兼容優(yōu)雅降級(jí)技術(shù)繪制小圖標(biāo)技巧雪碧圖圖標(biāo)字體矢量小圖標(biāo)設(shè)計(jì)本文對(duì)應(yīng)源碼源碼地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前寫了一篇關(guān)于雪碧圖的博文，...

    bitkylin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<