一读拆、精靈圖
1.1 為什么需要精靈圖
image.png
一個(gè)網(wǎng)頁(yè)中往往會(huì)應(yīng)用很多小的背景圖像作為修飾，當(dāng)網(wǎng)頁(yè)中的圖像過(guò)多時(shí)鸵闪，服務(wù)器就會(huì)頻繁地接收和發(fā)送請(qǐng)求圖片檐晕，造成服務(wù)器請(qǐng)求壓力過(guò)大，這將大大降低頁(yè)面的加載速度蚌讼。
因此辟灰，
image.png
1.2 精靈圖（sprites）的使用
使用精靈圖核心：
- 精靈技術(shù)主要針對(duì)于背景圖片使用，就是把多個(gè)小背景圖片整合到一張大圖片中沟蔑。
- 這個(gè)大圖片也稱為sprites精靈圖 或者 雪碧圖
- 移動(dòng)背景圖片位置湿诊，此時(shí)可以使用
- 移動(dòng)的距離就是這個(gè)目標(biāo)圖片的
和
坐標(biāo)。注意網(wǎng)頁(yè)中的坐標(biāo)有所不同瘦材。
- 因?yàn)橐话闱闆r下都是往上往左移動(dòng)厅须，所以數(shù)值是負(fù)值。
- 使用精靈圖的時(shí)候需要精確測(cè)量食棕，每個(gè)小背景圖片的大小和位置朗和。
使用精靈圖核心總結(jié)：
- 精靈圖主要針對(duì)于小的背景圖片使用。
- 主要借助于背景位置來(lái)實(shí)現(xiàn)--
- 一般情況下精靈圖都是負(fù)值簿晓。（千萬(wàn)注意網(wǎng)頁(yè)中的坐標(biāo)：x軸右邊走是正值眶拉，左邊走是負(fù)值，y軸同理憔儿。）
使用Fireworks CS6 確定圖片位置
-
使用Fireworks CS6打開(kāi)圖片image.png
-
使用Fireworks CS6打開(kāi)圖片
-
給背景圖層 加鎖image.png
-
給背景圖層 加鎖
-
使用切片工具確定小圖標(biāo)位置image.pngimage.png
-
使用切片工具確定小圖標(biāo)位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 60px;
height: 60px;
background-color: pink;
margin: 100 auto;
background: url(./images/sprites.png);
background-position: -183px 0px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
image.png
案例：評(píng)出自己的名字 BITAO
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.b,.i,.t,.a,.o {
float: left;
height: 110px;
background: url(./images/abcd.jpg);
}
.b {
width: 110px;
background-position: -119px -9px;
}
.i {
width: 63px;
background-position: -325px -140px;
}
.t {
width: 105px;
background-position: -368px -415px;
}
.a {
width: 110px;
background-position: 0 -9px;
}
.o {
width: 110px;
background-position: -370px -275px;
}
</style>
</head>
<body>
<div class="b">
</div>
<div class="i">
</div>
<div class="t">
</div>
<div class="a">
</div>
<div class="o">
</div>
</body>
</html>
二忆植、字體圖標(biāo)
2.1、字體圖標(biāo)的產(chǎn)生
字體圖標(biāo)使用場(chǎng)景：主要用于顯示網(wǎng)頁(yè)中通用谒臼、常用的一些小圖標(biāo)朝刊。
精靈圖是有諸多優(yōu)點(diǎn)的，但是缺點(diǎn)很明顯蜈缤。
- 圖片文件還是比較大的拾氓。
- 圖片本身放大和縮小會(huì)失真。
- 一旦圖片制作完畢想要更換非常復(fù)雜底哥。
此時(shí)咙鞍，有一種技術(shù)的出現(xiàn)很好的解決了以上的問(wèn)題，就是叠艳。
可以為前端工程師提供一種方便高效的圖標(biāo)使用方式奶陈，
2.2 字體圖標(biāo)的優(yōu)點(diǎn)
- 輕量級(jí)：一個(gè)圖標(biāo)字體要比一系列的圖像要小吃粒。一旦字體加載了，圖標(biāo)就會(huì)馬上渲染出來(lái)拒课，減少了服務(wù)器請(qǐng)求徐勃。
- 靈活性：本質(zhì)其實(shí)是文字，可以很隨意的改變顏色早像、產(chǎn)生陰影僻肖、透明效果、旋轉(zhuǎn)等卢鹦。
- 兼容性：幾乎支持所有的瀏覽器臀脏，請(qǐng)放心使用。
注意：字體圖標(biāo)不能替代精靈技術(shù)，只是對(duì)工作中圖標(biāo)部分技術(shù)的提升和優(yōu)化揉稚。
總結(jié)：
-
如果遇到一些結(jié)構(gòu)和樣式比較簡(jiǎn)單的小圖標(biāo)秒啦，就用字體圖標(biāo)。image.png
-
如果遇到一些結(jié)構(gòu)和樣式復(fù)雜一點(diǎn)的小圖片搀玖，就用精靈圖余境。image.png
字體圖標(biāo)是一些網(wǎng)頁(yè)常見(jiàn)的小圖標(biāo)，我們直接網(wǎng)上下載即可灌诅。因此使用可以分為：
- 字體圖標(biāo)的下載
推薦下載網(wǎng)站
-
icomoon字庫(kù) 推薦指數(shù) ★★★★★
icomoon成立于2011年芳来，推出了第一個(gè)自定義圖標(biāo)字體生成器，它允許用戶選擇所需要的圖標(biāo)猜拾，使它們成一字型即舌。該字庫(kù)內(nèi)容種類繁多，非常全面关带，唯一的遺憾使國(guó)外服務(wù)器侥涵，打開(kāi)網(wǎng)速較慢。 -
阿里iconfoot字庫(kù) 推薦指數(shù) ★★★★★
這個(gè)是阿里媽媽M2UX的一個(gè)iconfont字體圖標(biāo)字庫(kù)宋雏，包含了淘寶圖標(biāo)庫(kù)和阿里媽媽圖標(biāo)庫(kù)芜飘。可以使用AI制作圖標(biāo)上傳生成磨总。重點(diǎn)是嗦明，免費(fèi)！
-
字體圖標(biāo)的引入（引入到我們的html頁(yè)面中）image.png
image.png
在CSS樣式中全局聲明字體：簡(jiǎn)單理解把這些字體文件通過(guò)css引入到我們頁(yè)面中蚪燕。
一定注意字體文件路徑的問(wèn)題娶牌。
image.pngimage.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 字體聲明 */
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?p4ssmb');
src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
url('fonts/icomoon.woff?p4ssmb') format('woff'),
url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
span {
font-family: 'icomoon';
font-size: 100px;
}
</style>
</head>
<body>
<span>?</span>
<span>?</span>
</body>
</html>
image.png
- 字體圖標(biāo)的追加（以后添加新的小圖標(biāo)）
如果工作中，原來(lái)的字體圖標(biāo)不夠用了馆纳，我們需要添加新的字體圖標(biāo)到原來(lái)的字體文件中诗良。把壓縮包里面的從新上傳，然后選中自己想要新的圖標(biāo)鲁驶，從新下載壓縮包鉴裹，并替換原來(lái)的文件即可。
image.png
image.png
