css：精靈圖和字體圖標（精靈圖和icomoom字體圖標的使用）

時間 2020-07-06

標籤 css 精靈字體圖標 icomoom 使用欄目 CSS 简体版

原文原文鏈接

一、精靈圖css

（1）爲何須要精靈圖html

一個網頁中每每會應用到不少小的背景圖片，當網頁中的圖像過多時，服務器就會頻繁地接收和發送請求圖片，形成服務器的壓力過大，這將大大下降頁面的加載速度，精靈圖是將圖片放到一張裏面，這樣的話只要請求一次就能夠了json

精靈圖的出現下降了服務器的壓力，提升了圖片的加載速度瀏覽器

（2）精靈圖的核心服務器

主要針對於背景圖片的使用，把許多小的背景圖片整合到一張大的圖片中。對於其餘圖片，由於是須要頻繁地更換的，所以，不適合用精靈圖app

例如：王者榮耀官網精靈圖svg

圖片來源：王者榮耀官網字體

查看源碼：網站

從該圖片的屬性能夠看出，該圖片是做用於背景圖片的url

二、精靈圖的使用

先肯定圖片的位置：

左上角的位置爲（0,0），所以，須要將圖片沿x軸向左移動，y軸保持不變，y的座標爲0，x的座標爲負數

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
        .box{
            width:60px;
            height:60px;
            margin:100px auto;
            background:url(img/index.png) no-repeat 0;
            background-position: -182px 0;
        }
        </style>
    </head>
    <body>
    <div class="box"></div>
    </body>
</html>

三、字體圖標

（1）優勢

可以解決圖片文件較大、圖片縮小後會失真、製做完畢後修改起來比較複雜的問題。雖然看上去是圖標，可是本質上是文字。字體圖標要比圖片小，減少了服務器的壓力；能夠更改相應的屬性來更改圖標的樣式，使用起來更加方便。

（2）iconfont：http://www.javashuo.com/article/p-venntvlt-mq.html

（3）字體圖標網站

icomoom：https://icomoon.io/

阿里巴巴：iconfont

四、icomoom網站圖標的選擇

進入app：

選擇本身想要的圖標：

點擊底部導航能夠選擇更多圖標：

五、編輯圖標

點擊編輯：

能夠點擊按鈕實現圖標的縮放、旋轉：

六、下載圖標

點擊Generate Font：

顯示已經選擇的圖標：

下載：

七、字體圖標的使用

將下載的圖標的壓縮包打開：

將fonts目錄複製到工程目錄裏面：四種字體文件是爲了處理瀏覽器的兼容性問題

複製樣式：style.css

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

打開demo.html：複製小方框

    <body>
   　　 <span></span>
    </body>

指定字體：

span{
             font-family: 'icomoon';
         }

更改樣式：

span{
             font-family: 'icomoon';
             font-size: 40px;
             color: greenyellow;
         }

八、字體圖標的追加

點擊import：

選擇json文件：

加載之前的圖標：

繼續添加，添加完成後從新下載，而後更改工程中的相應的文件便可。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。