精灵图、阴影、字体图标

22.1.18

目录：

1、精灵图

2、盒子、文字阴影（复习）

3、字体图标的使用（以iconfont为例）

---

1、精灵图

精灵图样例：

例如王者荣耀官网所使用的精灵图

精灵图 就是将许许多多小图片拼在一张大图片上

精灵技术目的:

为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度。

精灵图的使用

（ 就是通过盒子大小是一定的，让精灵图的特定位置上的图标移动到盒子中显示出来，其余部分不显示）
使用精灵图的核心:
1.精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
2.移动背景图片位置，此时可以使用background-position.
3.移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同
4.精灵图一般与盒子左上角对齐，所以相对于盒子，图片一般应该向左、向上移动，所以background-position数值为负值
5.使用精灵图的时候需要精确测量,每个小背景图片的大小和位置。（使用ps测量）                              （通过测量得到的大小来确定所需显示图标盒子的大小）

---

2、阴影

盒子阴影(重点)

我们可以使用box-shadow属性为盒子添加阴影。

语法:

box - shadow: h-shadow  V-shadow  blur spread  color  inset;      

描述
h-shadow
必需。水平阴影的位置。允许负值。（正值往右走）
v-shadow
必需。垂直阴影的位置。允许负值。（正值往下走）
blur
可选。模糊距离。（就是一个影子看起来是虚的还是实的，如果为负数就没有）
spread
可选。阴影的尺寸（大小）
color
可选。阴影的颜色。请参阅CSS颜色值。
inset
可选。将外部阴影(outset)改为内部阴影。（***不能写outset否则会失效）

文字阴影（类似盒子阴影）

在CSS3中,我们可以使用text-shadow属性将阴影应用于文本。
语法:

text-shadow: h-shadow  v-shadow  blur  color;

值
描述
h-shadow
必需。水平阴影的位置。允许负值。
v-shadow
必需。金直阴影的位置。允许负值。
blur
可选。模糊的距离。
color
可选。阴影的颜色。
 

---

3、字体图标

（呈现方式是图标，实质上是字体font）

1. 如果遇到一些结构和样式比较简单的小图标,就用字体图标。

2.如果遇到一些结构和样式复杂点的小图片 ,就用精灵图。

字体图标样例：

字体图标是一些网页常见的小图标 ,我们直接网上下载即可。

使用步骤
1.字体图标的下载
2.字体图标的引入( 引入到我们html页面中)
3.字体图标的追加(以后添加新的小图标)

1、推荐使用阿里巴巴的iconfont（或者国外的icomoon)

有许多免费的字体图标，如：

 直接选择想用的图标，然后点击右下角的下载代码即可

文件格式

2、字体图标引入

下载代码至与网页源代码的  根目录  下解压（取名font）

 打开font中的iconfont.css（Unicode 引用）

复制如下代码到css中

@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('iconfont.ttf?t=1642666878658') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

 注意：此处url中的路径应根据正确路径来写，不能照抄

 如此处地址：

 url('../font/iconfont.ttf')

 引入到css后可到html中定义标签

如

 <span class="iconfont rubbish">&#xe666;</span> 

（此处有两个类名，iconfont必须有）

然后进入   demo_index.html   中复制图标的代码

如此处：&#xe666; 

上述增加rubbish类名可以更改该图标的大小

如：

.rubbish {

  font-size: 50px;（此处必须为font-size，因为字体图标本质为文字）

}

效果：

方法二（简易）***

直接使用link方式引用：

<link rel="stylesheet" href="font/iconfont.css">

然后在选择器内，设置类名及字体图标的类名即可（具体见阿里iconfont教程）