CSS精灵图

目录

• 字体图标的产生
• 字体图标的优点
• 字体图标的使用
  • 字体图标的下载
  • 字体图标的使用

在网页布局中有许多的小图标，这些图标都是由字体图标来进行实现的。

字体图标的产生#

在早期这些字体图标也使用精灵图进行实现，但是精灵图也有其自身缺点：

1. 图片文件还是比较大的。
2. 图片本身放大和缩小会失真。
3. 一旦图片制作完毕想要变更非常复杂。

此时，字体图标的技术就完美的解决了以上的问题

字体图标可以为前端工程师提供同一种方便高效的图标使用方式，展示的是图标，本质属于字体。

字体图标的优点#

• 轻量级：一个图标字体要比一系列的图像要小 。一旦字体加载了，图标马上就会渲染出来，减少了服务器的请求。
• 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等。
• 兼容性：几乎所有浏览器都支持。

注意：字体图标并不能代替精灵技术，只是对工作中图标部分技术的提升和优化。

字体图标的使用#

字体图标的下载#

字体图标可以去相应的图标网站进行下载，这里推荐两个网站：

1. icomoon
2. iconfont

这里以icomoon为例子，详情看pink老师的视频。

pink老师：字体图标下载视频

字体图标的使用#

根据以上视频下载好字体图标后，会得到一个.zip压缩文件。

将其中的fonts目录放到项目中。

然后将其中的style.css中的字体图标声明，复制到css的开头。

这里仍然以pink老师的视频为例子。

pink老师：字体图标使用