css精靈圖&字體圖標

精靈圖

1. 爲何須要精靈圖
   • 爲了有效的減小服務器接收和發送請求的次數，提升頁面的加載速度。出現了CSS精靈技術
2. 精靈圖（sprites）的使用
   • 精靈技術主要針對背景圖片。就是把多個小背景圖片整合到一張大圖片中。
   • 這個大圖片也稱爲sprites精靈圖或者雪碧圖
   • 移動背景圖片位置，使用background-position
   • 移動的距離就是這個目標圖片的x和y座標。注意網頁中的座標有所不一樣
   • 使用精靈圖的時候須要精確側臉，每一個小背景圖片的大小和位置

字體圖標

1. 主要用於顯示網頁中通用、經常使用的一些小圖標
2. 精靈圖缺點
   • 圖片文件比較大
   • 圖片自己放大和縮小會失真
   • 一旦圖片製做完想要更換很是複雜
3. 字體圖標能夠爲前端工程師提供一種方便高效的圖標使用方式，展現的時圖標，本質屬於字體
4. 優勢
   • 輕量級：一個圖標字體要比一系列的圖像要小，一旦字體加載了，圖標就會立刻渲染出來，減小服務器請求
   • 靈活性：本質實際上是文字，能夠很隨意的改變顏色，產生陰影、透明效果，旋轉等
   • 兼容性：幾乎支持全部的瀏覽器
   • 【注意】
     • 字體圖標不能代替精靈技術，只是對工做中圖標部分技術的提高和優化
5. 字體圖標的下載
   • icomoon字體庫 http：//icomoon.io
   • 阿里iconfont字體庫 http：//www.iconfontcn/
6. 字體圖標的引入
   • 把下載包裏面的font文件夾放入頁面根目錄
   • 在CSS樣式中全局生命字體：簡單理解把這些字體文件經過css引入到咱們頁面中
   • html標籤內添加小圖標
7. 字體圖標的追加
   • 把壓縮包裏面的selection.json重新上傳，而後選中本身想要新的圖標，從新下載壓縮包，並替換原來的文件

CSS三角畫法

div{
                width:0;
                height:0;
                line-height: 0;
                font-size: 0;
                border: 50px solid transparent;
                border-left-color: black;
}