資訊專欄INFORMATION COLUMN
摘要：簡介是什么就像名字一樣，就是圖標字體，像雅黑字體，思源字體一樣，這種字體就是由圖標構成有何優(yōu)勢輕量性一個圖標字體比一系列的圖像特別是在屏中使用雙倍圖像要小。問題很小創(chuàng)作自已的字體圖標很費時間，重構人員后期維護的成本偏高。
簡介
- iconfont是什么？
就像名字一樣，iconfont就是圖標字體，像雅黑字體，思源字體一樣，這種字體就是由圖標構成~
- 有何優(yōu)勢？
1、輕量性：一個圖標字體比一系列的圖像（特別是在Retina屏中使用雙倍圖像）要小。一旦圖標字體加載了，圖標就會馬上渲染出來，不需要下載一個圖像。可以減少HTTP請求，還可以配合HTML5離線存儲做性能優(yōu)化。
2、靈活性：圖標字體可以用過font-size屬性設置其任何大小，還可以加各種文字效果，包括顏色、Hover狀態(tài)、透明度、陰影和翻轉(zhuǎn)等效果。可以在任何背景下顯示。使用位圖的話，必須得為每個不同大小和不同效果的圖像輸出一個不同文件。
3、兼容性：網(wǎng)頁字體支持所有現(xiàn)代瀏覽器，包括IE低版本。詳細兼容性可以點擊這里。
- 有何劣勢？
1、圖標字體只能被渲染成單色或者CSS3的漸變色。（問題很小,不要慌）
2、使用版權上有限制，有好多字體是收費的。當然也有很多免費開源的精美字體圖標供下載使用。（問題很小）
3、創(chuàng)作自已的字體圖標很費時間，重構人員后期維護的成本偏高。（問題很小）
基于上面的分析，可以看出iconfont基本沒有劣勢（滑稽）。
那么這么好的東西，哪里才能買到呢？
使用方法此文使用阿里媽媽的圖標庫。
步驟1：進入網(wǎng)站。
點擊桌面上的瀏覽器，輸入 http://www.iconfont.cn/ ，吧唧一聲敲下回車
步驟2：選擇自己喜歡的圖標，點擊購物車的按鈕。
步驟3：選擇完畢后，點擊右上角的購物車按鈕。
步驟4：點擊添加到項目，如果沒有項目則新建一個項目（“加入項目”按鈕右邊有一個淺灰色按鈕），點擊確定
步驟5：點擊下載到本地。
步驟6：點開下載到的文件，點擊demo。
步驟7：查看上面的教程即可~嘿嘿嘿
三種不同引用的區(qū)別和注意事項！unicode引用
特點：
-兼容性最好，支持ie6+，及所有現(xiàn)代瀏覽器。
-支持按字體的方式去動態(tài)調(diào)整圖標大小，顏色等等。
-但是因為是字體，所以不支持多色。只能使用平臺里單色的圖標，就算項目里有多色圖標也會自動去色。
注意：
這里src中需要填寫對應路徑，你下載到的文件（上一步驟叫你下載的）中名為iconfont的eot,woff,ttf,svg類型的文件都要扔進vue項目中
font-class引用
與unicode使用方式相比，具有如下特點：
-兼容性良好，支持ie8+，及所有現(xiàn)代瀏覽器。
-相比于unicode語意明確，書寫更直觀。可以很容易分辨這個icon是什么。
-因為使用class來定義圖標，所以當要替換圖標時，只需要修改class里面的unicode引用。
-不過因為本質(zhì)上還是使用的字體，所以多色圖標還是不支持的。
注意:
使用這種引用只需要將下載到的文件中名為iconfont類型為css,svg,ttf,eot的文件扔進vue項目中即可
symbol引用
這是一種全新的使用方式，應該說這才是未來的主流，也是平臺目前推薦的用法。這種用法其實是做了一個svg的集合，與另外兩種相比具有如下特點：
-支持多色圖標了，不再受單色限制。
-通過一些技巧，支持像字體那樣，通過font-size,color來調(diào)整樣式。
-兼容性較差，支持 ie9+,及現(xiàn)代瀏覽器。
-瀏覽器渲染svg的性能一般，還不如png。
注意：
-使用這種引用只需要將下載到的文件中名為iconfont.js文件扔進vue項目中即可
-當從阿里圖庫中圖標被添加至項目，如果編輯過項目圖標的顏色或者圖標本身是有顏色的，那么在通過symbol獲取圖標時會在svg的path中增加fill屬性，導致無法更改顏色，如果需要動態(tài)修改顏色，需要這樣操作
經(jīng)過我們上面一些步驟的操作呢 我相信 你已經(jīng)能看到這條咸魚了。
.icon-xia{
font-size: 40px; // fontsize多大 寬高就多大
vertical-align: middle; //這個行內(nèi)垂直居中簡直不要太舒服
color: red;//改變顏色
opacity:.6;//改變透明度
...//沒錯，操作起來就像字體一樣，縱享絲滑
}
最后
謝謝大家，有問題請在評論區(qū)指出
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/114022.html
摘要：最早走出扁平化設計的是微軟，在年推出的，就用了大量的簡單形狀，移除了復雜的樣式和紋理。但是它有個問題就是，雪碧圖比較適合固定功能的網(wǎng)站。而且目前我們公司網(wǎng)站設計全部使用，我都好久沒打開過了，對于來說，雪碧圖位置的標識也是個挺麻煩的事情。 最近公司的設計人員想要把網(wǎng)站上面的小圖標都改為iconfont，我也做了一篇PPT分享給大家，如果現(xiàn)在不記下來，可能過幾個月就忘得一干二凈了 一· 現(xiàn)...
摘要：沒關系，筆者已經(jīng)為你們準備好了，請保存到文件中，假設你的文件名叫和你剛才保存的字體文件在一起，方便管理復制字體這個插件包有好多套字體，我們可以需要把自己的也復制到包中對應文件夾，當然了，不可能手動復制，筆者從來都是解放雙手的。 字體圖標盛行的年代，在項目里使用一套不失真又可以隨意改變大小顏色的圖標，是多么舒服的一件事。這里要推薦iconfont.cn，超多免費圖標，當然了，你的專屬美工...
摘要：所以實現(xiàn)小圖標時雪碧圖跟圖標字體會在一個網(wǎng)站共存，自定義圖標字體為什么比較耗時，且太復雜圖標無法實現(xiàn)請往下看開發(fā)流程就了解了。參考資料細談淺談圖標字體向下兼容優(yōu)雅降級技術繪制小圖標技巧雪碧圖圖標字體矢量小圖標設計本文對應源碼源碼地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前寫了一篇關于雪碧圖的博文，...
閱讀 2662·2021-11-25 09:43
閱讀 2472·2021-09-22 15:29
閱讀 983·2021-09-22 15:17
閱讀 3627·2021-09-03 10:36
閱讀 2222·2019-08-30 13:54
閱讀 1739·2019-08-30 11:23
閱讀 1163·2019-08-29 16:58
閱讀 1290·2019-08-29 16:14
