课程章节：第7章 他山之石 - Icon 组件 和 Transition 组件
主讲老师：张轩
课程内容：
今天学习的内容包括：
7-1 图标解决方案简介
课程收获：
一、css sprite 雪碧图
减少网络请求的压力
一是浏览器有一定的并发上限
二是网络延时，下载单个小图标的耗时远小时一次请求的网络延时
建议类似的图标合并
不建议大图标合并
提前加载图片
略微减少图片体积
二、base64
优点
base64的图片会随着html或者css一起下载到浏览器,减少了请求.
可避免跨域问题
缺点
老东西（低版本）的IE浏览器不兼容。
体积会比原来的图片大一点。
css中过多使用base64图片会使得css过大，不利于css的加载
应用场景
应用于小的图片几k的，太大的图片会转换后的大小太大，得不偿失。
用于一些css sprites不利处理的小图片，如一些可以通过background-repeat平铺来做成背景的图片。
生成base64
一些在线工具
webpack的url-loader
由于base64的特点，url-loader允许配置只对小于某一值的图标转换成base64，否则就会适得其反。
三、icon font 字体图标
特点
纯色图标
矢量图标
优势
灵活性，改变图标的颜色，背景色，大小都非常简单
兼容性，兼容所有流行的浏览器，不仅h5可以使用iconfont，app也可以使用iconfont，关于这方面可以查看其它线上分享
扩展性，替换图标很方便，新增图标也非常简单，也不需要考虑图标合并的问题，图片方案需要css sprite
高效性，iconfont有矢量特性，没有图片缩放的消耗高
在使用上字体文件和普通的静态资源一样，既可以外链也可以内链，并且字体文件也可以使用gzip压缩
在移动端上，可以只使用truetype类型，非常灵活小巧
缺点
制作iconfont需要svg设计稿，对于开发来说没有图片来的方便
只能是纯色
webpack中如何配置？
webpack中一般使用url-loader处理4类字体文件，将体积较小的文件转化成base64置入到css中，体积较大的文件file-loader到指定images文件夹。
参考
浅尝iconfont-----AlloyTeam
腾讯前端团队对iconfont的使用总结
四、inline svg
优点
相对icon font，inline是真正的矢量
css 控制性好
语义化好
缺点
浏览器兼容性差，仅对IE9+有效
而icon font兼容广泛，包括IE6
参考
使用SVG代替icon font-----简书
Web 设计新趋势: 使用 SVG 代替 Web Icon Font
如果你还在使用iconfont作为网页图标的解决方案，就太out了。(玛德)
盘点几种使用svg图标的方法
总结
追求性能和代码优雅用svg
考虑兼容问题用iconfont
图库
阿里巴巴矢量图库
Font Awesome图库
优界网-背景图库banner-app素材
制作工具
fontello：只支持SVG格式的图片生成
icomoon：只支持SVG格式的图片生成。
icomoon使用方法
以图换字的方法
隐藏字体，显示背景。
设置text-indent:-9999px
也可以font-size: 0
共同学习，写下你的评论
评论加载中...
作者其他优质文章
