亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

CSS之精靈圖（雪碧圖）與字體圖標(biāo)

番茄西紅柿 / 1638人閱讀

摘要：本文內(nèi)容精靈圖字體圖標(biāo)首發(fā)日期精靈圖在以前，每個(gè)圖片資源都是獨(dú)立的一張張圖片，瀏覽器訪問網(wǎng)站中的不同網(wǎng)頁(yè)時(shí)是重復(fù)獲取這一張張圖片的，這代表需要訪問很多次資源。能提供一種使用字體圖標(biāo)的方式能提供第二種使用字體圖標(biāo)的方式。

本文內(nèi)容：

  • 精靈圖
  • 字體圖標(biāo)

 

 

 

首發(fā)日期：2018-05-01

精靈圖：

在以前，每個(gè)圖片資源都是獨(dú)立的一張張圖片，瀏覽器訪問網(wǎng)站中的不同網(wǎng)頁(yè)時(shí)是重復(fù)獲取這一張張圖片的，這代表需要訪問很多次資源。

為了減少資源的訪問次數(shù)，將多個(gè)常用的圖片集合到一張圖片中（網(wǎng)頁(yè)的緩存機(jī)制是會(huì)略去本地已經(jīng)有的資源，如果前一次獲取到了這個(gè)資源，那么后面不會(huì)再訪問了，直到緩存的資源失效了?！疽馑加悬c(diǎn)類似去游樂園，有些票能玩所有游戲，而有些票只能玩一個(gè)游戲，如果你拿著能玩所有游戲的票，那你就不用麻煩去一次次買票了】）。

 

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

 

 

示例：

下面是一張26字母表，我們利用這張圖來(lái)拼出一個(gè)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>

結(jié)果:

 

 

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

 

在現(xiàn)實(shí)中很多的背景圖片都使用了這種技術(shù).

比如京東LOGO:

京東的一些小圖標(biāo)：

字體圖標(biāo)：

 

眾所周知，單位字體的文件大小小于圖片的大小，考慮精靈圖處理的是一張張圖片，有人就有了一個(gè)奇思妙想--把圖片轉(zhuǎn)換成字體（實(shí)際上字體本來(lái)就是那么設(shè)計(jì)下來(lái)的。）

轉(zhuǎn)換成字體后，可以使用特殊的代碼來(lái)顯示出指定的圖片。

 

字體圖標(biāo)比精靈圖有一個(gè)非常明顯的好處，因?yàn)樗亲煮w，所以它能夠改變字體顏色，能改變字體大小（并且不會(huì)失真）。

 

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

我利用icomoon制作了一套字體圖標(biāo)，【icomoon有現(xiàn)成的圖標(biāo)選擇】，并下載下來(lái)。下面是文件名。

style.css能提供一種使用字體圖標(biāo)的方式

demo.html能提供第二種使用字體圖標(biāo)的方式。

 

然后使用：

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>

 

 

 

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/2311.html

相關(guān)文章

  • 淺談 CSS Sprites 雪碧圖應(yīng)用

    摘要：編寫配置文件，以下是關(guān)鍵配置代碼雪碧圖合并輸出到文件參數(shù)執(zhí)行目錄參數(shù)生成的和圖片的文件名之所以推薦，是因?yàn)榉浅５撵`活，看懂模塊的可以根據(jù)你的項(xiàng)目情況編寫對(duì)應(yīng)的配置文件。 showImg(https://segmentfault.com/img/bVGpAw?w=518&h=156); 前言 網(wǎng)站開發(fā)90%會(huì)用到小圖標(biāo)， 多小圖標(biāo)調(diào)用顯示是前端開發(fā)常見的問題；目前小圖標(biāo)顯示常見有兩種方式...

    MkkHou 評(píng)論0 收藏0

  • CSS4:icon全解

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

    LinkedME2016 評(píng)論0 收藏0

  • 浮動(dòng)的補(bǔ)充丶文本和字體屬性丶background丶定位

    摘要：英語(yǔ)為了防止用戶電腦里面，沒有微軟雅黑這個(gè)字體。因?yàn)榻^對(duì)定位脫離標(biāo)準(zhǔn)流，影響頁(yè)面的布局。一丶浮動(dòng)的補(bǔ)充 　　浮動(dòng)的特性: 　　　　1.浮動(dòng)的元素脫標(biāo) 　　　　2.浮動(dòng)的元素互相貼靠 　　　　3.浮動(dòng)的元素有字圍效果 　　　　4.浮動(dòng)的元素有收縮的效果 　　　　前提是標(biāo)準(zhǔn)文檔流,margin的垂直方向會(huì)出現(xiàn)塌陷問題 　　　　如果盒子居中:margin: 0auto;如果盒子浮動(dòng)了,margin...

    番茄西紅柿 評(píng)論0 收藏0

  • 使用compass自動(dòng)合并css雪碧圖(css sprite)

    摘要：使用雪碧圖，能夠減少頁(yè)面的請(qǐng)求數(shù)降低圖片占用的字節(jié)，以此來(lái)達(dá)到提升頁(yè)面訪問速度的目的。也正是因?yàn)檫@一點(diǎn)，導(dǎo)致很多開發(fā)者懶于使用雪碧圖。本文就介紹下怎樣使用來(lái)自動(dòng)合并雪碧圖。生成的每個(gè)雪碧圖默認(rèn)的規(guī)則是目錄名圖片名。 css雪碧圖又叫css精靈或css sprite，是一種背景圖片的拼合技術(shù)。使用css雪碧圖，能夠減少頁(yè)面的請(qǐng)求數(shù)、降低圖片占用的字節(jié)，以此來(lái)達(dá)到提升頁(yè)面訪問速度的目的。但...

    劉永祥 評(píng)論0 收藏0

  • iconfont實(shí)踐小結(jié)

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

    bitkylin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<