img/background/iconfont---谁最适合你?

前言

第一篇文章,小弟先作一番自我介绍^ω^
姓名不说,年龄21岁,湖北武汉一所二本大学2016届本科毕业生,大四前的暑假起对web前端产生兴趣并有半年实习经验。ng、vue、react等等高大上的框架彻底不懂,却也靠前端交流群和百度积攒下了一些小当心得。说来写文章也是比较心虚,怕有理解不到位之处还可能祸害别人。但是万一哪位大牛看到以后闲来无事在评论里指点一波,我不就赚大了么^ω^但愿各位能抱着辩证的观点看看个人文章,有什么错误之处还请不吝赐教。^ω^css

比较

在这里将三者放在一块儿比较其实比较勉强,根据图像类型来区分,img/background和iconfont是一对参照物,根据图像使用方式来区分,img和background是一对参照物。那么咱们一个一个看吧。html

1.img与background使用区别

http://blog.sina.com.cn/s/blog_6722ab160101bnn7.html前端

上面的连接内容是一位前辈对于img和background的看法。很好很强大,我是怎么也想不到seo这里去的,根据前辈所述,按照浏览器解析机制,html标签优先解析,像官网的logo这种须要很是醒目的标志性图片,选择img会更合适。使用img的另一个好处就是图片提示。就像咱们在浏览爱奇艺网站的时候,有时视频下的文字因为太长而被省略,咱们将鼠标移动到图片上时会有一个小的气泡弹出,里面显示该视频的标题所有内容。这样有利于辅助阅读。vue

而使用background属性来加载图片有一个很是好用的技巧就是雪碧图(css sprite)。在全部的网站优化话题中,资源文件的压缩都是占很大比重的。若是能将若干张小图片合并成一张大图片,那么只须要一次http请求就能取到咱们所须要的资源,能够提升页面载入速度。像百度图片中的友情连接所使用的图片就是做为backgeound-image呈现的,并使用css sprite进行合并。而且相对来说,background更加支持自适应布局,css3中提供了background-size的属性,能够将图片拉伸、缩放至须要的大小。react

clipboard.png

clipboard.png
总结一下:当须要优先加载、须要提供详细信息的时候,咱们选择img更合适;而一些小图标好比用户头像、等数量繁多且体积小的图片,则适合用background来加载。通常来讲,若是是装饰性的图片就使用background-img,若是和文体内容很相关就使用img
下面一则连接一样是一位前辈总结的二者使用环境的区分,各位且看且斟酌。css3

http://my.oschina.net/u/1162572/blog/137403web

2.iconfont的使用环境

iconfont中文名为图标字体,顾名思义是一类字体,以约定好的代码来表明对应相对应样式,可以作到不使用图片而呈现图片的效果,总结有如下优势:浏览器

  1. 轻量性:一个图标字体比一系列的图像(特别是在Retina屏中使用双倍图像)要小。一旦图标字体加载了,图标就会立刻渲染出来,不须要下载一个图像。能够减小HTTP请求,还能够配合HTML5离线存储作性能优化。性能优化

  2. 灵活性:图标字体能够用过font-size属性设置其任何大小,还能够加各类文字效果,包括颜色、Hover状态、透明度、阴影和翻转等效果。能够在任何背景下显示。使用位图的话,必须得为每一个不一样大小和不一样效果的图像输出一个不一样文件。框架

  3. 兼容性:网页字体支持全部现代浏览器,包括IE低版本。咱们在caniuse.com能够查到其对于主流浏览器的兼容性。

clipboard.png
只要支持网页字体就能使用图标字体。

除了以上优点以外,固然也有劣势:

  1. 图标字体只能被渲染成单色或者CSS3的渐变色,因为此限制使得它不能普遍使用。

  2. 使用版权上有限制,有好多字体是收费的。固然也有不少免费开源的精美字体图标供下载使用。

  3. 创做自已的字体图标很费时间,重构人员后期维护的成本偏高。

图标字体使用方法这里就很少叙述了,有兴趣的各位能够在下面连接看看。

http://www.tuicool.com/articles/B32uYj

淘宝对于图标字体是很是支持的,以致于淘宝本身开发了一套iconfont库。 若是须要展现纯色图片,使用iconfont会是不错的选择,前面也提到了图标字体具备轻量的特性,而且能够自定义颜色、大小,可使用控制字体的属性对图标字体进行控制。对于移动端来说,iconfont的使用更加普遍。许多页面上的icon如点赞、评论、收藏等纯色图标都会使用iconfont,很是方便。

clipboard.png

结语

综上所述,我总结了一个列表:

img background iconfont
网站logo 轮播图片 小型纯色图标
产品/视频/新闻列表栏目 合并图片(css sprites)
须要优先加载的图片

但愿本文对你们搭建页面时有所帮助。

相关文章
相关标签/搜索