web前端之CSS技術（五）

續web前端之CSS技術（一）
續web前端之CSS技術（二）
續web前端之CSS技術（三）
續web前端之CSS技術（四）

14. 精靈圖

14.1 爲什麼需要精靈圖

        一個網頁中往往會使用很多小圖標進行裝飾，當網頁中的圖片過多，服務器就會頻繁的接收和發送請求圖片，造成服務器請求壓力過大，這將大大降低頁面的加載速度。
        因此，爲了有效地減少服務器接收和發送請求的次數，提高頁面的加載速度，出現了CSS精靈技術（也稱 CSS Sprites）。

14.2 核心原理

        將網頁中的一些小背景圖像整合到一張大圖上，這樣服務器只需要一次請求就可以了。

14.3 精靈圖的使用

· 使用精靈圖核心：

1. 精靈技術主要針對於背景圖使用，就是把多個小圖像整合到一張大圖中；
2. 這個大圖也稱爲sprites、精靈圖；
3. 移動背景圖片位置，此時可以使用background-position；
4. 移動的距離就是這個目標圖片的X和Y座標。注意：網頁中的座標有所不同
5. 一般情況下，目標圖片是向上向左移動，所以數值是負值；
6. 使用精靈圖時需要精確測量，每個小圖片的大小和位置。

· 使用精靈圖核心總結：

1. 精靈圖主要針對於小的背景圖使用；
2. 主要藉助於背景位置來實現；
3. 一般情況下，精靈圖都是負值。（千萬注意網頁中的座標： x軸右邊走是正值，左邊走是負值， y軸同理。）

15. 字體圖標

15.1 字體圖標的產生

        字體圖標使用場景：主要用於顯示網頁中通用、常用的一些小圖標。

· 精靈圖是有諸多優點的，但是缺點很明顯：

1. 圖片文件還是比較大的；
2. 圖片本身放大或縮小會失真；
3. 一旦圖片製作完畢想要更換就會非常複雜。

        此時有一種技術的出現很好地解決了以上問題，就是字體圖標iconfont。
        字體圖標可以爲前端程序員提供一種方便高效的圖標使用方式，展示的是圖標，本質屬於字體。

15.2 字體圖標的優點

· 輕量級：一個字體圖標要比一系列的圖像要小
· 靈活性：本質其實是文字，可以很隨意的改變顏色、產生陰影、透明效果、旋轉等
· 兼容性：幾乎支持所有的瀏覽器
注意： 字體圖標不能替代精靈技術，只是對工作中圖標部分技術的提升和優化。
總結：

1. 如果遇到一些結構和樣式比較簡單的小圖標，就用字體圖標
2. 如果遇到一些結構和樣式複雜一點的小圖片，就用精靈圖

---

        字體圖標是一些網頁常見的小圖標，我們直接網上下載即可。因此使用字體圖標可以分爲：

1. 字體圖標的下載
2. 字體圖標的引入（引入到HTML頁面中）
3. 字體圖標的追加（以後添加新的小圖標）

---

15.3 字體圖標的下載

推薦下載網站：

1. icomoon字庫
2. 阿里iconfont字庫

15.4 字體圖標的引入

以icomoon字庫爲例：


點擊右上角icomoon app，進入圖標選擇頁面，選擇好圖標後，點擊右下角的Generate Font，進入字體圖標庫頁面，再點擊右下角的Download下載。
下載完畢後，注意原先的文件不要刪，後面會用。

1. 把下載包裏的fonts文件夾放入頁面根目錄下
   
   

2. 在CSS樣式中全局聲明字體：簡單理解就是把這些字體文件通過CSS引入到我們的頁面中。

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

   這段代碼不用記住，剛剛下載的包裏有style.css文件，雙擊打開後複製到css中即可。

3. 字體圖標的引入：將編碼複製到css中的content裏，如下面的代碼所示。
   

   span::before {
       font-family: 'icomoon';
       content: '\eae5';
       color: #e60012;
       padding-right: 10px;
   }
   

---

最終的代碼如下圖所示：

16. CSS三角

網頁中常見一些三角形，使用 CSS 直接畫出來就可以，不必做成圖片或者字體圖標。

代碼如下：

div {
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    border: 50px solid;
    border-top-color: blue;
    border-right-color: red;
    border-bottom-color: green;
    border-left-color: yellow;
}