教育行業A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

怎樣引入iconfont字體圖標?【操作步驟及字體下載】

更新時間:2021年12月07日18時31分 來源:傳智教育 瀏覽次數:

好口碑IT培訓

iconfont字體圖標可以為前端工程師提供一種方便高效的圖標使用方式,展示的是圖標,本質屬于字體。當我們遇到一些結構和樣式比較簡單的小圖標,就可以使用字體圖標。

字體圖標優點:

輕量級:一個圖標字體要比一系列的圖像要小。一旦字體加載了,圖標就會馬上渲染出來,減少了服務器請求。

靈活性:本質其實是文字,可以很隨意的改變顏色、產生陰影、透明效果、旋轉等

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

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

1.字體圖標的下載

推薦下載網站:

  icomoon 字庫 http://icomoon.io 推薦指數 ★★★★★

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

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

這個是阿里媽媽 M2UX 的一個 iconfont 字體圖標字庫,包含了淘寶圖標庫和阿里媽媽圖標庫。可以使用 AI制作圖標上傳生成。 重點是,免費!

2.字體圖標的引入

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

不同瀏覽器所支持的字體格式是不一樣的,字體圖標之所以兼容,就是因為包含了主流瀏覽器支持的字體文件。

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.字體圖標的添加

首先在html 標簽內添加小圖標。

<span>   </span>

給標簽定義字體。

span {
    font-family: "icomoon";
}

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

4.字體圖標的追加

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


0 分享到:
红豆直播app黄台_红豆直播app下载免费_红豆直播app下载