CSS Sprite 和字体图标

Mochiler
386 阅读5分钟

突然发现不会做精灵图，咱就是研究一下子 用的工具是fireworks 并不是很专业

1.CSS Sprite 概述

CSS Sprite 也叫CSS雪碧图、CSS精灵图，是一种网页图片应用处理方式。把多个小图。片整合到一张大图中。

1.1 为什么需要精灵图

  • 网页中会使用很小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁的接收和发送请求图片，造成服务器的压力过大，这将大大降低页面的加载速度

  • 因此，为了有效的减少服务器的接收和发送请求的次数，提高页面的加载速度，提出了CSS精灵技术

  • 核心原理：将网页中的一些小背景图像整合到一张大图中（减少图片数量和体积），这样服务器只需要请求一次就够了

  • 解决程序员图片命名的困扰

1.2 精灵图的使用

  • 主要针对于背景图片的使用。把多个小图片整合到一张大图中，这个大图称为精灵图

  • 移动图片背景位置，此时可以使用background-position

  • 移动的距离就是这个目标图片的 x 和 y 坐标，往下往右坐标都是负值。

  • 使用切片工具测出小图片的大小和坐标，不给坐标默认是左上角的位置

举个例子：

background: url(图片的位置) no-repeat -128px 0;
  • 调试方法：可以在浏览器一点一点调啦~

1.3 切片制作（fireworks为例）

image.png
  1. 用fireworks打开00C4A9E2.png这张图。
  2. 用魔棒工具双击这张图片空白处，然后delete
  3. 接着把要镂空的地方用相同方法处理一下，变这样 00C7B3F6.png
image.png
  1. 可以使用辅助线工具给他画框框，然后用切片工具选中,点击指针工具选中，可以在右侧的对齐功能那里把切片调整成统一大小
image.png
  1. 然后在优化功能那里，选中PNG 8格式，透明程度为Alpha 透明度。
  2. 然后右键点击导出切片，即可导出背景透明的切片。

1.4 CSS Sprite制作

  1. 改上述步骤6：选中要导出为精灵图的切片，用右键点击导出CSS Sprite，选中仅所选切片，点击保存即可

image.png

就是这个方法导出的精灵图是竖着的...


或者用在线制作工具

在线制作工具网页：www.toptal.com/developers/…

  1. 打开网站，将切好的切片拖进去
image.png

1.4 CSS Sprites图片整合原则

  • 边切图边整合，定位时避免使用bottom,right等，用具体的数值，为了避免当你的宽度或高度上扩展sprites图时出现位置的错误。
  • 将小图标预留足够的空间，因为使用这些图标元素通常会有大量的内容而且可能需要扩展的间距，以至于其它的图片可能会意外出现在本区域内。一般的情况下，会将这些小图标整合到文件的最右侧。
  • 单张整合好的sprite图片在100KB以内。
  • 按分类整合图片。
  • 为了方便计算尺寸，一般情况会将sprites图的坐标计算成整数倍。

2. 字体图标

使用场景：主要用于显示网页中通用、常用的一些小图标
上面说的精灵图有诸多优点，但是缺点也很明显：

  • 图片文件还是比较大的
  • 图片本身放大或缩小会失真
  • 图片一旦制作完成要想更换非常复杂

此时，有一种技术的出现就很好的解决了以上问题。——字体图标iconfont

字体图标可以作为前端工程师提供的一种方便高效的图标使用方式，展示的是图标，本质属于字体（可以理解为不会失真，可以变大变小变漂亮...）

优点：

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

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

总结：

  1. 如果遇到一些样式结构比较简单的小图标，就用字体图标
  2. 遇到样式和结构复杂一点的图片，就用精灵图

1. 字体图标的下载

推荐下载网站：

2. 字体图标的引入（到HTML页面中）

  1. 把font文件夹放到页面根目录下（里面有多个字体文件，这样是为了浏览器的兼容）
  2. 在css样式中全局声明字体：把字体通过CSS引入到页面中，一定注意文字文件路径的问题
@font-face{
    font-family:'icomoon'; 
    ....这个代码要从解压的文件夹的css的文件中复制到有font-display:block;的地方。
}
  1. 双击里面的demo的HTML文件，复制下图类似小框或者前面的编码部分放到元素标签里

image.png

<style>
    span {
        content：'\e900';
        /*content:''*/
    	font-family: 'icomoon';
        font-size: 5px;
        color: pink;
        }	
</style>

<body>
	<span>复制的小图标</span>
</body>

3. 字体图标的追加（添加新的小图标）

把压缩包里的selection.josn从新上传，然后选中自己想要的新图标，重新下载压缩包，并替换原来的文件

image.png image.png

avatar
文章
阅读
粉丝