当前位置 : 主页 > 编程语言 > 其它开发 >

CSS精灵图

来源:互联网 收集:自由互联 发布时间:2022-06-10
目录 字体图标的产生 字体图标的优点 字体图标的使用 字体图标的下载 字体图标的使用 在网页布局中有许多的小图标,这些图标都是由字体图标来进行实现的。 字体图标的产生 在早

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

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

字体图标的产生

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

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

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

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

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

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

字体图标的使用 字体图标的下载

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

  1. icomoon
  2. iconfont

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

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

字体图标的使用

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

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

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

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

pink老师:字体图标使用

上一篇:Ubuntu20.04设置静态IP
下一篇:没有了
网友评论