这篇文章主要介绍了css实现精灵图与字体图标的相关知识，非常不错，具有参考借鉴价值，需要的朋友参考下吧
精灵图：
在以前，每个图片资源都是独立的一张张图片，浏览器访问网站中的不同网页时是重复获取这一张张图片的，这代表需要访问很多次资源。
为了减少资源的访问次数，将多个常用的图片集合到一张图片中（网页的缓存机制是会略去本地已经有的资源，如果前一次获取到了这个资源，那么后面不会再访问了，直到缓存的资源失效了。【意思有点类似去游乐园，有些票能玩所有游戏，而有些票只能玩一个游戏，如果你拿着能玩所有游戏的票，那你就不用麻烦去一次次买票了】）。
将多个常用的图片集合到一张图片中之后，把这个图设置成背景图片，然后利用background-position来显示图片的不同部分。
立即学习“前端免费学习笔记（深入）”；
示例：
下面是一张26字母表，我们利用这张图来拼出一个GOOGLE
Document
结果:
如上例所示,我们可以把多张图片放到一张大图中,然后利用background-position就可以截取出我们想要看到的内容.
在现实中很多的背景图片都使用了这种技术.
九州易通科技开发的核心产品易通企业网站系统(CmsEasy3.0)是充分按照SEO最佳标准来开发，营销实用性非常强企业建站系统。灵活的静态化控制，可以自定义字段，自定义模板，自定义表单，自定义URL，交叉绑定分类，地区，专题等多元化定制大大增加了企业网站的各种需求空间。强大的模板自定义可以轻松打造出个性的栏目封面，文章列表，图片列表，下载列表，分类列表，地区列表等等。主体功能列表如下：支持生成ht
比如京东LOGO:
京东的一些小图标：
字体图标：
众所周知，单位字体的文件大小小于图片的大小，考虑精灵图处理的是一张张图片，有人就有了一个奇思妙想--把图片转换成字体（实际上字体本来就是那么设计下来的。）
转换成字体后，可以使用特殊的代码来显示出指定的图片。
字体图标比精灵图有一个非常明显的好处，因为他是字体，所以它能够改变字体颜色，能改变字体大小（并且不会失真）。
例子：【下面仅演示使用，不演示如何制作字体图标】
我利用icomoon制作了一套字体图标，【icomoon有现成的图标选择】，并下载下来。下面是文件名。
style.css能提供一种使用字体图标的方式
demo.html能提供第二种使用字体图标的方式。
然后使用：
Document
相关推荐：
