首頁  >  文章  >  web前端  >  CSS實作精靈圖與字體圖標

CSS實作精靈圖與字體圖標

不言
不言原創
2018-05-08 16:24:032218瀏覽

這篇文章主要介紹了CSS實現精靈圖與字體圖示的相關知識,非常不錯,具有參考借鑒價值,需要的朋友參考下吧

##精靈圖:

在以前,每個圖片資源都是獨立的一張張圖片,瀏覽器訪問網站中的不同網頁時是重複獲取這一張張圖片的,這代表需要訪問很多次資源。

為了減少資源的造訪次數,將多個常用的圖片集合到一張圖片中(網頁的快取機制是會略去本地已經有的資源,如果前一次取得到了這個資源,那麼後面不會再訪問了,直到快取的資源失效了。就不用麻煩去一次次買票了】)。

將多個常用的圖片集合到一張圖片中之後,把這個圖設定成背景圖片,然後利用background-position來顯示圖片的不同部分。

範例:

下面是一張26字母表,我們利用這張圖來拼出一個GOOGLE

#

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

    </style>
</head>
<body>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</body>
</html>

#結果:

#如上例所示,我們可以把多張圖片放到一張大圖中,然後利用background-position就可以截取出我們想要看到的內容.

在現實中很多的背景圖片都使用了這種技術.

#例如京東LOGO:

#京東的一些小圖示:

##字體圖示:眾所周知,單位字體的檔案大小小於圖片的大小,考慮精靈圖處理的是一張張圖片,有人就有了一個奇思妙想- -把圖片轉換成字體(實際上字體本來就是那麼設計下來的。)

#轉換成字體後,可以使用特殊的程式碼來顯示指定的圖片。

字體圖示比精靈圖有一個非常明顯的好處,因為他是字體,所以它能夠改變字體顏色,能改變字體大小(並且不會失真)。

範例:【下面僅示範使用,不示範如何製作字體圖標】

我利用icomoon製作了一套字體圖標,【icomoon有現成的圖示選擇】,並下載下來。下面是檔案名稱。

style.css能提供一個使用字體圖示的方式

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

然後使用:

 

#
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style >
    /* 声明字体  这下面一堆文字在下载的文件夹中的css文件中*/
        @font-face {
      font-family: &#39;icomoon&#39;;
      src:  url(&#39;fonts/icomoon.eot?ni3k5c&#39;);
      src:  url(&#39;fonts/icomoon.eot?ni3k5c#iefix&#39;) format(&#39;embedded-opentype&#39;),
        url(&#39;fonts/icomoon.ttf?ni3k5c&#39;) format(&#39;truetype&#39;),
        url(&#39;fonts/icomoon.woff?ni3k5c&#39;) format(&#39;woff&#39;),
        url(&#39;fonts/icomoon.svg?ni3k5c#icomoon&#39;) format(&#39;svg&#39;);
      font-weight: normal;
      font-style: normal;
        }
        /* 使用 */
        [class^="icon-"], [class*=" icon-"] {
          /* use !important to prevent issues with browser extensions that change fonts */
          font-family: &#39;icomoon&#39; !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";
        }
        p{
            font-family:&#39;icomoon&#39;;/* 要与上面一致 */
        }
    </style>
</head>
<body>
    <p class=".icon-imagee"></p> 
    <!-- 第一种使用方式:
    导入style.css文件,并使用指定图标的类选择器的属性作为对应的class属性值
     -->
    <p></p> <!-- 第二种使用方式:
    对标签进行字体声明,然后打开demo.html复制那个图标下来【左边一个代码,右边一个图标】
     -->
     <!-- 第一种方法是使用::before来增加,我们也可以使用别的::before方式来添加 -->
</body>
</html>

##相關推薦:


CSS實作書籤圖案的效果

#

以上是CSS實作精靈圖與字體圖標的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn