1. 程式人生 > >css學習_css精靈技術、字體圖標

css學習_css精靈技術、字體圖標

src 原來 image 字體 請求 alt inf 分享圖片 追加

1、精靈技術產生的背景(減少向服務器請求的次數,減小服務器壓力)

技術分享圖片

2、精靈技術的本質(小的背景圖集中在一張大圖上)

技術分享圖片

3、精靈技術的使用

案例1:

技術分享圖片

案例2:

技術分享圖片

註意:產品類的圖片一般不是用背景,而是用img標簽

案例3:

技術分享圖片

4、字體圖標---比精靈圖標更占優勢

技術分享圖片

技術分享圖片

字體圖標使用流程(如果前2步不需要,可以直接從第3步開始)

技術分享圖片

推薦轉換網站

技術分享圖片

如何下載字體圖標(壓縮包一定不要丟。把壓縮包裏的fonts文件放在自己的項目中)

技術分享圖片

技術分享圖片

技術分享圖片

使用步驟

技術分享圖片

註意fonts路徑問題,別放錯了。

技術分享圖片

如何追加新圖標到原來的庫裏面?

技術分享圖片

css學習_css精靈技術、字體圖標