CSS精靈圖與字體圖示
1. 精靈圖
當用戶訪問一個網站時，需要向服務器發送請求，網頁上的每張影像都要經過一次請求才能展現給用戶，然而，一個網頁中往往會應用很多小的背景影像作為修飾，當網頁中的影像過多時，服務器就會頻繁地接受和發送請求，這將大大降低頁面的加載速度，為了有效地減少服務器接受和發送請求的次數，提高頁面的加載速度，出現了CSS精靈技術，
精靈圖主要針對與小的背景圖片使用，我們在網頁中看到的一些小圖片，比如下圖中圈起來的部分
當你去查看原圖時，會發現顯示出來的是這樣的
這就是精靈圖的應用，使用精靈圖時主要通過background-position調整坐標來顯示不同的小圖案，
默認精靈圖的左上角對齊坐標的原點
當要移動精靈圖來顯示不同的圖案時，只能往X的負半軸（左方）和Y的負半軸（上方）移動，對于精靈圖而言是往左上角移動了，故X坐標和Y坐標都應該為負數，
2. 字體圖示
2.1 字體圖示的產生
使用場景：主要用于顯示網頁中通用、常用的一些小圖示，
精靈圖雖然有很多優點，但是缺點也很明顯：
- 圖片檔案還是比較大的
- 圖片本身放大和縮小會失真
- 一旦圖片制作完畢想要更換非常復雜
此時，字體圖示iconfont的出現很好的解決了以上的問題，
字體圖示展示的是圖示，本質屬于字體，
2.2 字體圖示的優點
- 輕量級：一個圖示字體比一系列的影像要小，一旦字體加載了，圖示就會馬上渲染出來，減少了服務器請求，
- 靈活性：本質其實是文字，可以隨意改變顏色、產生陰影、透明效果、旋轉等等，
- 兼容性：幾乎支持所有的瀏覽器，
注：字體圖示不能替代精靈技術，只是對作業中圖示部分技術的提升和優化，
總結：
- 結構和樣式比較簡單的小圖示，就用字體圖示
- 結構和樣式復雜一點的，就用精靈圖
2.3 字體圖示的使用
2.3.1 字體圖示的下載
這里推薦阿里媽媽M2UX的一個iconfont字體圖示字庫，這個是免費的，包含了淘寶圖示庫和阿里媽媽圖示庫，可以使用AI制作圖示上傳生成，
http://www.iconfont.cn
打開之后是這樣的
登錄支持GitHub賬號登錄和新浪微博登錄，要登錄之后才能下載圖示，
找到需要的圖示后，添加到購物車中，方便后續一起打包下載，
上圖是購物車里的圖示，下面有三種選擇：
- 添加至專案：將選中的圖示添加到云端的專案中，方便多人協作，也不會弄丟，
- 下載素材：將選中的圖示下載到本地中，可以根據自己的需求選擇顏色、像素、圖示格式，
- 下載代碼：通過代碼來引入字體圖示，下載后打開壓縮包里的html檔案，里面有引入的幾種方法的說明，注意下載代碼后要將解壓后的檔案夾放到你的專案的font檔案夾中！不然會引入不成功
2.3.2 字體圖示的在線使用
這種方法方便修改每個圖示的樣式，而且也方便添加和洗掉圖示，還能多人協作，也能轉讓專案，個人推薦使用這種方法，
首先點進上方導航欄的“資源管理”->“我的專案”
通過“查看在線鏈接”，生成代碼，將代碼復制到你的專案的css檔案中，這里也是有三種引入方式，自行選擇，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/172633.html
標籤：其他
上一篇：bootstrap表格樣式