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

番茄西紅柿發布于2019-04-23 13:46 / 1565人閱讀

摘要：本文內容精靈圖字體圖標首發日期精靈圖在以前，每個圖片資源都是獨立的一張張圖片，瀏覽器訪問網站中的不同網頁時是重復獲取這一張張圖片的，這代表需要訪問很多次資源。能提供一種使用字體圖標的方式能提供第二種使用字體圖標的方式。

本文內容：

精靈圖
字體圖標

首發日期：2018-05-01

精靈圖：

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

為了減少資源的訪問次數，將多個常用的圖片集合到一張圖片中（網頁的緩存機制是會略去本地已經有的資源，如果前一次獲取到了這個資源，那么后面不會再訪問了，直到緩存的資源失效了。【意思有點類似去游樂園，有些票能玩所有游戲，而有些票只能玩一個游戲，如果你拿著能玩所有游戲的票，那你就不用麻煩去一次次買票了】）。

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

示例：

下面是一張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>Documenttitle>
    <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>

結果:

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

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

比如京東LOGO:

京東的一些小圖標：

字體圖標：

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

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

字體圖標比精靈圖有一個非常明顯的好處，因為他是字體，所以它能夠改變字體顏色，能改變字體大小（并且不會失真）。

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

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

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

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

然后使用：

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Documenttitle>
    <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> 
    

    <div>?div> 

     

body>
html>

GPU云服務器云服務器雪碧圖 html使用雪碧圖 html 精靈圖 html精靈圖引入

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2311.html

淺談 CSS Sprites 雪碧圖應用

摘要：編寫配置文件，以下是關鍵配置代碼雪碧圖合并輸出到文件參數執行目錄參數生成的和圖片的文件名之所以推薦，是因為非常的靈活，看懂模塊的可以根據你的項目情況編寫對應的配置文件。 showImg(https://segmentfault.com/img/bVGpAw?w=518&h=156); 前言網站開發90%會用到小圖標，多小圖標調用顯示是前端開發常見的問題；目前小圖標顯示常見有兩種方式...

MkkHou 2019-08-30 13:12 評論0 收藏0
CSS4:icon全解

摘要：全解法如何在文件里扣出圖層里的圖標右鍵選中這個圖層右擊這個圖層把這個圖層放到新文件點擊圖片的按鈕自動切圖到最小再調整一下畫布大小將圖片設置為長寬一樣導出即可在頁面里圖片會默認保持比例所以只要設置寬高的其中一種就可以了摳圖的前端現在基本沒有了 CSS4:icon全解 1.img法 1.1如何在psd文件里扣出圖層里的圖標右鍵選中這個圖層showImg(https://segmentf...

LinkedME2016 2019-08-30 15:53 評論0 收藏0
浮動的補充丶文本和字體屬性丶background丶定位

摘要：英語為了防止用戶電腦里面，沒有微軟雅黑這個字體。因為絕對定位脫離標準流，影響頁面的布局。一丶浮動的補充　　浮動的特性: 　　　　1.浮動的元素脫標　　　　2.浮動的元素互相貼靠　　　　3.浮動的元素有字圍效果　　　　4.浮動的元素有收縮的效果　　　　前提是標準文檔流,margin的垂直方向會出現塌陷問題　　　　如果盒子居中:margin: 0auto;如果盒子浮動了,margin...

番茄西紅柿 2019-04-23 13:22 評論0 收藏0
使用compass自動合并css雪碧圖(css sprite)

摘要：使用雪碧圖，能夠減少頁面的請求數降低圖片占用的字節，以此來達到提升頁面訪問速度的目的。也正是因為這一點，導致很多開發者懶于使用雪碧圖。本文就介紹下怎樣使用來自動合并雪碧圖。生成的每個雪碧圖默認的規則是目錄名圖片名。 css雪碧圖又叫css精靈或css sprite，是一種背景圖片的拼合技術。使用css雪碧圖，能夠減少頁面的請求數、降低圖片占用的字節，以此來達到提升頁面訪問速度的目的。但...

劉永祥 2019-08-28 18:06 評論0 收藏0
iconfont實踐小結

摘要：所以實現小圖標時雪碧圖跟圖標字體會在一個網站共存，自定義圖標字體為什么比較耗時，且太復雜圖標無法實現請往下看開發流程就了解了。參考資料細談淺談圖標字體向下兼容優雅降級技術繪制小圖標技巧雪碧圖圖標字體矢量小圖標設計本文對應源碼源碼地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前寫了一篇關于雪碧圖的博文，...

bitkylin 2019-08-29 13:00 評論0 收藏0