首頁技術(shù)文章正文

iconfont字體圖標(biāo)的下載和使用【前端技術(shù)文章】

更新時間:2021-12-08 來源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

iconfont字體圖標(biāo)可以為前端工程師提供一種方便高效的圖標(biāo)使用方式，展示的是圖標(biāo)，本質(zhì)屬于字體。當(dāng)我們遇到一些結(jié)構(gòu)和樣式比較簡單的小圖標(biāo)，就可以使用字體圖標(biāo)。

字體圖標(biāo)優(yōu)點(diǎn)：

輕量級：一個圖標(biāo)字體要比一系列的圖像要小。一旦字體加載了，圖標(biāo)就會馬上渲染出來，減少了服務(wù)器請求。

靈活性：本質(zhì)其實(shí)是文字，可以很隨意的改變顏色、產(chǎn)生陰影、透明效果、旋轉(zhuǎn)等

兼容性：幾乎支持所有的瀏覽器，請放心使用

字體圖標(biāo)不能替代精靈技術(shù)，只是對工作中圖標(biāo)部分技術(shù)的提升和優(yōu)化。是一些網(wǎng)頁常見的小圖標(biāo)，我們直接網(wǎng)上下載即可。 因此使用字體圖標(biāo)可以分為下載、引入、追加（以后添加新的小圖標(biāo)）三步。

1.字體圖標(biāo)的下載

推薦下載網(wǎng)站：

  icomoon 字庫 http://icomoon.io 推薦指數(shù) ★★★★★

IcoMoon 成立于 2011 年，推出了第一個自定義圖標(biāo)字體生成器，它允許用戶選擇所需要的圖標(biāo)，使它們成一字型。該字庫內(nèi)容種類繁多，非常全面，唯一的遺憾是國外服務(wù)器，打開網(wǎng)速較慢。

  阿里 iconfont 字庫 http://www.iconfont.cn/ 推薦指數(shù) ★★★★★

這個是阿里媽媽 M2UX 的一個 iconfont 字體圖標(biāo)字庫，包含了淘寶圖標(biāo)庫和阿里媽媽圖標(biāo)庫?？梢允褂?AI制作圖標(biāo)上傳生成。 重點(diǎn)是，免費(fèi)!

2.字體圖標(biāo)的引入

下載完畢之后，注意原先的文件不要刪，后面會用。把下載包里面的 fonts 文件夾放入頁面根目錄下

不同瀏覽器所支持的字體格式是不一樣的，字體圖標(biāo)之所以兼容，就是因?yàn)榘酥髁鳛g覽器支持的字體文件。

TureType(.ttf)格式.ttf字體是Windows和Mac的最常見的字體，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

Web Open Font Format(.woff)格式woff字體，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

Embedded Open Type(.eot)格式.eot字體是IE專用字體，支持這種字體的瀏覽器有IE4+；

SVG(.svg)格式.svg字體是基于SVG字體渲染的一種格式，支持這種字體的瀏覽器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

在 CSS 樣式中全局聲明字體： 簡單理解把這些字體文件通過css引入到我們頁面中。一定注意字體文件路徑的問題。

@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?7kkyc2');
    src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), 
         url('fonts/icomoon.ttf?7kkyc2') format('truetype'), 
         url('fonts/icomoon.woff?7kkyc2') format('woff'), 
         url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

3.字體圖標(biāo)的添加

首先在html 標(biāo)簽內(nèi)添加小圖標(biāo)。

<span>   </span>

給標(biāo)簽定義字體。

span {
    font-family: "icomoon";
}

務(wù)必保證這個字體和上面@font-face里面的字體保持一致

4.字體圖標(biāo)的追加

如果工作中，原來的字體圖標(biāo)不夠用了，我們需要添加新的字體圖標(biāo)到原來的字體文件中。 把壓縮包里面的selection.json 從新上傳，然后選中自己想要新的圖標(biāo)，從新下載壓縮包，并替換原來的文件即可。


字體圖標(biāo)加載的原理：





猜你喜歡：

ionic如何實(shí)現(xiàn)圖標(biāo)類樣式？

什么是字體圖標(biāo)？有什么優(yōu)勢？

前端圖標(biāo)插件ECharts入門教程

清除input默認(rèn)樣式【CSS教程】

黑馬程序員web前端開發(fā)培訓(xùn)
分享到：
在線咨詢 我要報名
和我們在線交談！