App下載

前端頁面如何引入小圖標(biāo)?CSS字體的另類使用方式!

猿友 2021-07-23 17:19:10 瀏覽數(shù) (4552)
反饋

相信很多小伙伴都在網(wǎng)頁中結(jié)果一個(gè)個(gè)的小圖標(biāo).在學(xué)習(xí)完html和css后我們也可以做到再web頁面使用小圖標(biāo),但是一般我們要實(shí)現(xiàn)這樣的小圖標(biāo)都是用圖片去使用的,那么有沒有什么更高級(jí)的方法呢(或者說,互聯(lián)網(wǎng)大廠們他們是怎么做的呢)?接下來這篇文章告訴你。

先來看看我們說的小圖標(biāo)究竟是什么

小圖標(biāo)

以該頁面為例,紅色方框所標(biāo)注的應(yīng)該是一個(gè)類似列表項(xiàng)的按鈕,但實(shí)際上css提供的列表項(xiàng)并沒有這樣的形狀(也不能給其指定顏色),其實(shí)這就是一個(gè)小圖標(biāo)。

藍(lán)色方框(左邊)標(biāo)注的是一個(gè)按鈕的小圖標(biāo),這樣的圖標(biāo)很常見,比如收縮框的放大鏡,購(gòu)物車的購(gòu)物車圖標(biāo)等等,這些其實(shí)也是一個(gè)小圖標(biāo)。

藍(lán)色方框(右邊)標(biāo)注的是一個(gè)小的角標(biāo),這樣的角標(biāo)很常見,比如上面的暑期大促,還有一些new,hot等小角標(biāo)都是比較常見的,這些也是一種圖標(biāo)。

如何實(shí)現(xiàn)(最基本的方式)?

角標(biāo)的實(shí)現(xiàn)可以直接使用定位去將角標(biāo)定位到右上角,不過這樣的方式并不好看(而且角標(biāo)內(nèi)的字體可能是特殊定制過的藝術(shù)字)。

另外兩種圖標(biāo)本質(zhì)上是一張圖片,也是利用將圖片絕對(duì)定位到相應(yīng)的地方就可以實(shí)現(xiàn)了(也可以使用background屬性去實(shí)現(xiàn),這種方法更好(因?yàn)闇p少了html標(biāo)簽))

 最基本的實(shí)現(xiàn)方式只要學(xué)習(xí)了HTML與CSS就會(huì)操作,所以小編就放源代碼了(如果連最基本的方式都不會(huì),建議先前往W3Cschool學(xué)習(xí)相關(guān)的前端知識(shí)吧)

進(jìn)階版(使用雪碧圖)

在基礎(chǔ)方式上你會(huì)發(fā)現(xiàn)一個(gè)頁面要用到的圖片實(shí)在是太多了,加載這些圖片需要與瀏覽器進(jìn)行很多·次的請(qǐng)求。這時(shí)侯出現(xiàn)了一種新的技術(shù)(其實(shí)只是對(duì)原有技術(shù)的更好的使用)。就是雪碧圖,雪碧圖的精髓就是將這些小圖標(biāo)合在一張圖片中,在請(qǐng)求數(shù)據(jù)的時(shí)候就避免了多次請(qǐng)求。這樣在早期有助于降低帶寬和服務(wù)器的壓力,同時(shí)也對(duì)渲染有所幫助(一次獲取全部小圖標(biāo)進(jìn)行渲染)(上述的三種小圖標(biāo)統(tǒng)統(tǒng)都可以用雪碧圖實(shí)現(xiàn))。

雪碧圖

這是一張雪碧圖,在調(diào)用圖的時(shí)候本質(zhì)上還是使用background屬性去進(jìn)行圖片的切割和定位。源代碼如下(相關(guān)css為了展示方便卸載了style標(biāo)簽中):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bg-icon_diamond{width: 34px; height: 32px;background: url('css_sprites.png') -10px -10px;}
        .bg-icon_fire{width: 30px; height: 36px;background: url('css_sprites.png') -118px -10px;}
        .bg-icon_bag {width: 28px; height: 34px;background: url('css_sprites.png') -168px -10px;}
        .bg-icon_game {width: 34px; height: 32px;background: url('css_sprites.png') -64px -10px;}
        .bg-icon_person {width: 32px; height: 34px;background: url('css_sprites.png') -10px -62px;}
        .bg-icon_time {width: 32px; height: 32px;background: url('css_sprites.png') -62px -62px;}
    </style>
</head>
<body>
    <div class="bg-icon_diamond"></div>
    <div class="bg-icon_fire"></div>
    <div class="bg-icon_bag"></div>
    <div class="bg-icon_game"></div>
    <div class="bg-icon_person"></div>
    <div class="bg-icon_time"></div>
</body>
</html>

這樣我們就可以用class來指定小圖標(biāo)了(記住這種操作,后面還會(huì)提到)。

第三種方法(使用CSS字體)

首先我們先介紹一個(gè)網(wǎng)站:https://www.iconfont.cn/這是阿里巴巴的矢量圖標(biāo)庫(kù),我們可以在上面選擇自己需要的矢量圖標(biāo)庫(kù)進(jìn)行選擇,放入收藏夾后可以選擇下載,下載后解壓就會(huì)得到一個(gè)如下文件夾:

字體解壓文件夾

點(diǎn)擊?demo_index.html?,就可以進(jìn)入到示例的代碼,它介紹了這個(gè)css字體的三種使用方式(但都是使用字體的方式)。這三種使用方式的具體操作方式和優(yōu)缺點(diǎn)以及實(shí)例代碼該頁面都寫的很清楚了小編就不再多介紹了。

樣例介紹

對(duì)于三種圖標(biāo)引入方式的選擇

我們上面提到的角標(biāo),在第三種方法中不能使用(除非自己封裝字體庫(kù)),而使用第一種方式又太占用帶寬和性能,所以一般來說角標(biāo)都是使用雪碧圖方式來實(shí)現(xiàn)的。有些logo和圖標(biāo)整個(gè)頁面只使用一次,或者沒有必要封裝成雪碧圖,這時(shí)候就可以采用第一種方式進(jìn)行圖標(biāo)引入了。小圖標(biāo)方面,如果能在iconfont中找到自己所有需要的圖標(biāo),那么使用這種方式會(huì)比雪碧圖更輕松(指實(shí)現(xiàn)代碼比較清楚),但是如果害怕版權(quán)問題,或者找不到你需要的圖標(biāo),你可能需要自己封裝字體庫(kù)或者使用雪碧圖。

小結(jié)

以上就是web頁面使用圖標(biāo)的三種方式的介紹,更多前端開發(fā)小技巧請(qǐng)關(guān)注W3Cschool


0 人點(diǎn)贊