精灵图&字体图片

精灵图

精灵图（sprite），精灵图是把需要用到的小图标都放在一张大的图上面，然后在页面访问数据库申请加载图片的时候，那么这张大图上的小图标就可以只加载一次，把这张大图加载到浏览器上，然后通过设置这张背景图片在盒子先的位置，来显示不同的图标，在需要使用背景图片的时候，url指向同一张背景图片。实现了只加载一次，就得到了多个图标，减少了访问次数，减小数据库的压力。
在把图片作为背景图片的时候，以左上角与盒子对齐，然后通过position设置背景图片需要显示的位置，position的x,y的值的设置也是以左上角作为零点设置的，，区别于一般的坐标系。

总结：精灵图就是将图标集成到一张图片，然后通过设置位置对同一张图片的重复使用，来达到减少访问数据库次数的目的。

字体图片

字体图片使用在小的、简单的图标上，将图标以字体的形式插入，然后按照对于字体的设置才控制图标，本质是字体。图标通过网站获取（icomoon（国外网站，速度较慢），iconfont（阿里的网站，速度较快）)，在下载了整个的图标以后，需要将文件导入到HTML文件所在的文件夹，然后输入下载文件中的css代码，进行字体声明。

使用的时候，将下载的字体小框复制到需要放置的位置，然后进其进行字体的设置，font：字体声明的时候的名称，这个需要和字体声明的时候的一致。
总结：下载字体图片，将文件放入html文件夹，声明字体，引用