一、使用image实现
- 注意img的大小设置
- 使用vertical-align对齐
- 所有都兼容
缺点：
img数量多可能导致请求数过多
http1.0客户端：反应慢，每个请求要花时间去建立
服务器：请求多造成线程过多，产生压力
产生流量多，流量要花钱
二、CSS Sprites
-
设置width，height，background-position
-
精灵图生成：
1、命令行：npm css sprites，可以找到 sprity。通过文档中的 sprity-cli 来查看如何在命令行中使用它
2、在线工具 CSS Sprite Generator -
所有都兼容
缺点：
1、无法缩放
2、不好修改
三、Icon Font 把字体做成图标
- 制作字体文件
- 声明font-family
1、使用本地链接
2、使用第三方链接 - 使用font-family @font-face
1、使用html实体（所有都兼容）
2、使用CSS:before（IE6不兼容）
四、CSS画Icon
- IE支持不太好，比如border-radius IE8-不支持
五、SVG
- img src=svg
- SVG symbol 它是以标签的形式来组织所有的图片的，移动端首选
- 优点：可以方便的修改 icon 的大小、颜色，缩放没有锯齿
- IE9+
网友评论