位图：优点：图片清晰，缺点：放大后分辨率不够

矢量图：可以无限放大缩小，容量小，可以通过字体方式调整图片

iconfont.cn

https://icomoon.io/app/#/select

位图：jpg,png（清晰，质量大，放大后不清晰，图片）

矢量图：svg（可缩放，质量小，色彩体现差，图形）

<span class="icon-diamonds">&#xe919;</span>会显示两个图标

iconfont笔记

font+html 优缺点

雪碧图优缺点

@font-face {

  font-family: 'icomoon';

  src:  url('fonts/icomoon.eot');

  src:  url('fonts/icomoon.eot') format('embedded-opentype'),

    url('fonts/icomoon.ttf') format('truetype'),

    url('fonts/icomoon.woff') format('woff'),

    url('fonts/icomoon.svg') format('svg');

  font-weight: normal;

  font-style: normal;

}

测试测试测试测试测试测试

1、css雪碧图/css精灵   sprite

减少http请求次数，使网页加载速度更快，提高网页性能

需先设置背景图片，再通过精灵图中的小图标的宽高位置，设置对应的div宽高和背景定位坐标

span{

   background：url("")；

}

span .div1{

   background-position:-10px -20px;

}

1、位图与矢量图的区别：

位图：表达清晰，图片不能放大，所占空间大（对图片质量要求高，如照片）----->bmp，jpg，png，gif

矢量图：可任意缩小放大，所占空间小，在互联网上下载快（对图片要求不高，如图片、文字、卡通等）----->svg

2、字体图标：

图标采取字体格式

可以使用color、font-size等改变图标颜色、大小等样式

字体图标（首选阿里，备用icoMoon）

雪碧图小结：

字体图标的优势：

传统方式的图标：

图片格式分类：

位图：清晰、细腻，但放大后容易失真，占空间大，不利于在互联网进行图片的展示或下载。

矢量图：可任意放大，占空间小，但在色彩方面相比位图差一些。

font-face

需要和前端沟通解决怎么传输的问题