CSS之精靈圖（雪碧圖）與字體圖標

時間 2019-11-30

標籤 css 精靈雪碧字體圖標欄目 CSS 简体版

原文原文鏈接

本文內容：

精靈圖
字體圖標

首發日期：2018-05-01css

精靈圖：

在之前，每一個圖片資源都是獨立的一張張圖片，瀏覽器訪問網站中的不一樣網頁時是重複獲取這一張張圖片的，這表明須要訪問不少次資源。html

爲了減小資源的訪問次數，將多個經常使用的圖片集合到一張圖片中（網頁的緩存機制是會略去本地已經有的資源，若是前一次獲取到了這個資源，那麼後面不會再訪問了，直到緩存的資源失效了。【意思有點相似去遊樂園，有些票能玩全部遊戲，而有些票只能玩一個遊戲，若是你拿着能玩全部遊戲的票，那你就不用麻煩去一次次買票了】）。web

將多個經常使用的圖片集合到一張圖片中以後，把這個圖設置成背景圖片，而後利用background-position來顯示圖片的不一樣部分。c#

示例：

下面是一張26字母表，咱們利用這張圖來拼出一個GOOGLE瀏覽器

圖片資源:https://image.baidu.com/search/detail?ct=503316480&z=&tn=baiduimagedetail&ipn=d&word=abcdefg%E5%AD%97%E6%AF%8D%E8%A1%A8&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=-1&cs=3405886261,1538057521&os=178737096,359585931&simid=3351831992,40571452&pn=1&rn=1&di=168865797980&ln=132&fr=&fmq=1525108485498_R&ic=0&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&is=0,0&istype=2&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&objurl=http%3A%2F%2Fimg2.xiukee.com%2Fupload%2F2015%2F12%2F24%2F2216482877.jpg%40100q.jpg&rpstart=0&rpnum=0&adpicid=0緩存

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        div{
            display:inline-block;
        }
        div:first-child{
            width:79px;
            height: 79px;
            background-image:url('abcd.jpg');
            background-position:-396px 0;
        }
        div:nth-child(2){
            width:82px;
            height: 82px;
            background-image:url('abcd.jpg');
            background-position:-326px -98px;
        }
        div:nth-child(3){
            width:82px;
            height: 82px;
            background-image:url('abcd.jpg');
            background-position:-326px -98px;
        }
        div:nth-child(4){
            width:79px;
            height: 79px;
            background-image:url('abcd.jpg');
            background-position:-396px 0;
        }
        div:nth-child(5){
            width:48px;
            height: 77px;
            background-image:url('abcd.jpg');
            background-position:-81px -101px;
        }
        div:nth-child(6){
            width:48px;
            height: 77px;
            background-image:url('abcd.jpg');
            background-position:-286px 0;
        }

    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

結果:svg

如上例所示,咱們能夠把多張圖片放到一張大圖中,而後利用background-position就能夠截取出咱們想要看到的內容.字體

在現實中不少的背景圖片都使用了這種技術.網站

好比京東LOGO:ui

京東的一些小圖標：

字體圖標：

衆所周知，單位字體的文件大小小於圖片的大小，考慮精靈圖處理的是一張張圖片，有人就有了一個奇思妙想--把圖片轉換成字體（實際上字體原本就是那麼設計下來的。）

轉換成字體後，可使用特殊的代碼來顯示出指定的圖片。

字體圖標比精靈圖有一個很是明顯的好處，由於他是字體，因此它可以改變字體顏色，能改變字體大小（而且不會失真）。

例子：【下面僅演示使用，不演示如何製做字體圖標】

我利用icomoon製做了一套字體圖標，【icomoon有現成的圖標選擇】，並下載下來。下面是文件名。

style.css能提供一種使用字體圖標的方式

demo.html能提供第二種使用字體圖標的方式。

而後使用：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style >
    /* 聲明字體  這下面一堆文字在下載的文件夾中的css文件中*/
        @font-face {
      font-family: 'icomoon';
      src:  url('fonts/icomoon.eot?ni3k5c');
      src:  url('fonts/icomoon.eot?ni3k5c#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?ni3k5c') format('truetype'),
        url('fonts/icomoon.woff?ni3k5c') format('woff'),
        url('fonts/icomoon.svg?ni3k5c#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
        }
        /* 使用 */
        [class^="icon-"], [class*=" icon-"] {
          /* use !important to prevent issues with browser extensions that change fonts */
          font-family: 'icomoon' !important;
          speak: none;
          font-style: normal;
          font-weight: normal;
          font-variant: normal;
          text-transform: none;
          line-height: 1;

          /* Better Font Rendering =========== */
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
        .icon-home:before {
          content: "\e900";
        }
        .icon-image:before {
          content: "\e90d";
        }
        .icon-music:before {
          content: "\e911";
        }
        div{
            font-family:'icomoon';/* 要與上面一致 */
        }
    </style>
</head>
<body>
    <div class=".icon-imagee"></div> 
    <!-- 第一種使用方式：
    導入style.css文件，並使用指定圖標的類選擇器的屬性做爲對應的class屬性值

     -->

    <div></div> <!-- 第二種使用方式：
    對標籤進行字體聲明，而後打開demo.html複製那個圖標下來【左邊一個代碼，右邊一個圖標】
     -->

     <!-- 第一種方法是使用::before來增長，咱們也可使用別的::before方式來添加 -->

</body>
</html>

相關標籤/搜索

每日一句

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