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

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

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

TureType(.ttf)格式.ttf字體是Windows和Mac的最常見(jiàn)的字體，支持這種字體的瀏覽器有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 樣式中全局聲明字體： 簡(jiǎn)單理解把這些字體文件通過(guò)css引入到我們頁(yè)面中。一定注意字體文件路徑的問(wèn)題。

@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ù)必保證這個(gè)字體和上面@font-face里面的字體保持一致

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

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

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