浅谈雪碧图和字体图标,图标字体应用实践

图标字体 VS 七喜图——图标字体选取实践

2017/04/05 · HTML5 · 1
评论 ·
图标字体

原稿出处:
人人网FED博客   

正文介绍使用图标字体和SVG取代Sprite图的章程。百事可乐图是很多网站常常利用的一种技术,可是它有欠缺:高清屏会模糊、不可能动态变化如hover时候反色。而使用图标字体能够周全化解上述难题,同时持有包容性好,生成的文本小等优点。

1.CSS Pepsi-Cola(Coca Cola图|天使图)指什么? 有怎么着效力

  • CSS
    Pepsi-Colas是一种网页图片选取处理情势。它同意你将1个页面涉及到的有所零星图片都含有到一张大图中去,那样一来,当访问该页面时,载入的图片就不会像从前这样一幅一幅地日益呈现出来了。
  • CSS
    Coca Colas的法则其实正是把网页中有个别背景图片整合到一张图片文件中,再使用CSS的“background-image”,“background-
    repeat”,“background-position”的重组展开背景定位,background-position可以用数字能确切的一直出背景图片的地点。

起因

近日是前者技术的大学一年级时。若干年过去过后,大概大家会咋舌很多,当年阿当的一篇博文多么的辛辣。vue和angular的闹剧。近年来临危受命,要做几天的前端开发。说是前端开发,其实正是写html+css+JavaScript,真的,当您面对庞大的前端技术系统不知所厝的时候,用最简便易行的技巧来一场放松吗。

此次开发,没有怎么尤其的,便是本人在小图标显示的时候。在百事可乐图和图标字体中徘徊了很久。于是,不难切磋了弹指间,就当立多少个flag,日后在追究一下。

多年来学习了七喜图的利用,七喜图的功利那块就不多说了,只说选用有的。

雪碧图

7-Up图实例:天猫商城PC端

图片 1

将多张小图放至一张大图

利用的时候,通过background-position调整突显的职务,如下图所示:

图片 2

Coca Cola图的运用方法

利用7-Up图唯一的长处,能够说正是压缩浏览器的央求次数。因为浏览器同一时半刻间能够加载的资源数是毫无疑问的,IE
8是两个,Chrome是5个,Firefox是7个。为了求证,写了以下html结构:(那部份即使有点跑题,但是很要供给研究一下)

图片 3

验证Chrome同时加载个数的html–很多张不小的图纸

接下来在Chrome的开发者工具里面包车型地铁Timeline可以看看Chrome确实是伍个五个加载的,每一趟最多加载四个:

图片 4

Chrome同时最多加载财富数为几个

Pepsi-Cola图的制作方法能够用node的二个的包css-sprite,10分地方便人民群众。只要将图标做好,放到相应的文件夹里面,写好布局文件运维,就可见生成对应的图样和css,无需协调手动去调动任务等css属性。详见css-sprite

而是,使用七喜图存在不可幸免的毛病

作用
  • 使用CSS
    7-Ups能很好地缩减了网页的http请求,从而大大的升高了页面包车型客车个性
  • CSS
    七喜s能收缩图片的字节,例如3张图纸合并成1张图纸的字节总是小于那3张图片的字节总和
  • CSS
    7-Ups化解了网页设计师在图纸命名上的干扰,只需对一张集聚的图形上命名就能够了,不必要对每贰个小成分实行命名,从而增强了网页的成立作用。
  • 更换风格方便,只要求在一张或少张图纸上修改图片的颜料或样式,整个网页的风格就能够变更。维护起来更为便于

浅谈雪碧图和字体图标,图标字体应用实践。雪碧图

而外叫Sprite图外,它还有很多名字,css sprite, css
天使等。原理就是将一部分小图标合并到一张图纸上,然后用css的背景定位来呈现须求体现的片段。

工具

sprite-generator

栗子:

图片

图片 5

image

定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css sprite</title>
    <style>
        .bg{
            background: url("css_sprites .png");
        }
        .bg-9 {
            width: 262px; height: 156px;
            background-position: -10px -10px;
        }

        .bg-10 {
            width: 246px; height: 150px;
            background-position: -292px -10px;
        }
    </style>
</head>
<body>
    <div class="bg bg-9"></div>
    <div class="bg bg-10"></div>
</body>
</html>

效果

图片 6

image

优点

  • 削减对服务器的央求次数比如页面有五个图标,把他们放到一张背景图上,只需要加载一次。然后用css定位从这张图片来取就可以了
  • 增长页面包车型客车加载速度减少了页面的请求次数,自然会提高了页面的加载速度

缺点

  • 护卫麻烦,如若改动当中的一张图,你须求修改整张图。
  • 高清失真,为了适应分裂的分辨率,大概要准备多少个标准的图形。

Coca Cola图的施用信赖于background-position那个天性,属性值分别为x,y轴的值,图片的来得大小由容器决定,不难点说,正是承载该图片的大大小小是多大呈现区间就是多大,发轫点便是background-position属性值的坐标。

Sprite图的症结

2.img标签和CSS背景使用图片在动用意况上有啥差距

img标签一般用于能够点击跳转链接或许能够脾性化定制改变(如登6头像)的图形,css背景相似是向来不变的始末(如logo),点击后不会跳转到新页面
css背景相似用于静态不变的图样。可以是页面LOGO等。

图标字体

可以缩放的矢量图标。你可以动用CSS对它们举办改动:大小,颜色,阴影等。体积越发的小。也许几百个图标才几十KB。

工具

iconfont是Ali提供贰个矢量图标库。

fontawesome
国外一款不错的图标库,用bootstrap的都不面生了。

栗子:

iconfont和fontawesome法定都提供了很详细的应用教程,那里不就不做赘述了。
简言之的写了一个小demo。能够去大致的看一下。

优点

  • 高清保真,因为是SVG图形。
  • 圆滑,能够安装大小,颜色等。
  • 兼容性好,支持IE6
  • 开源的字体库很多
  • 减少HTTP请求

缺点

  • 维护和谐的字体库麻烦一些
  • 图表字体只可以被渲染为单色的
例写法:.btn2{background-position:0 -38px;  }

高清屏会失真

在2x的配备像素比的显示器上例如mac,假如要达到规定的标准和文字一样的清晰度,图片的小幅度必要实际显示大小的两倍,不然看起来会相比模糊:读者可以对照左侧文字和左边图片里文字的清晰度

图片 7

右侧图片里的文字比左侧字体的文字模糊

专程是明日手提式有线电话机绝大部份是高清屏了,例如iphone 6 plus的分辨率达到了一九二零 *
1080,所以为了高清屏,使用Coca Cola图恐怕要预备各个条件的图形。

3.title 和 alt属性分别有怎么着功能

  • title
    属性规定关于成分的附加消息,这么些音信平常会在鼠标移到成分上时体现一段提示文本
    title 属性常与 form 以及 a
    成分一同使用,以提供有关输入格式和链接指标的新闻
  • alt 属性是贰个供给的习性,它规定在图像无法展现时的替代文本
    ![](/i/eg_tulip.jpg)
    当图片十分的小概显示时,就会变成上面这几个样子:

    图片 8

总结

那篇文章只是浅谈了部分Pepsi-Cola图和图标字体,没有太过的记忆犹新,也算是一篇工具介绍吧。那二种办法的面世,都以为着减弱HTTP请求次数。优化和升级换代网页的访问速度。各有千秋。假如实际支付中,能够两种方法结合着来。

小栗子

sprite-generator

iconfont

fontawesome

材料取自慕课网Coca Cola图课程

Pepsi-Cola图不便宜变化

Coca Cola图是一李晖态的图片,当她转移的那天就尘埃落定了他要以什么样的章程体现,由此小编无法动态地改变她的水彩,不也许让他变大(只怕会失真),十分小概像文字一样加一个阴影效果等等。例如上面包车型大巴菜系,hover恐怕选中的时候反色:

图片 9
图片 10

入选可能hover时反色

抑或是某一天UI要换颜色、某一天老总挂了,为表哀悼,为个商行的网站要换个珊瑚红调。使用七喜图时,全部的图标都得重新创建。

接纳图标字体能够圆满化解地点的题材

4.background: url(abc.png) 0 0 no-repeat;那句话是何等看头

设置图片abc为背景图片,地点为x轴方向0px,y轴方向0px(左上角是 0
0),不另行图片

<!DOCTYPE html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title>
</head>
<style>
    /*清除默认样式*/
   html,body,ul,li,button,div,input,a{ padding:0; margin:0; }
   a{text-decoration:none}
   body{ font-size:10px;}
   .content input::-webkit-input-placeholder {color:#ccc;padding-left:30px;}
</style>
<style>
    /*书写样式*/
    .content{margin-top:15px;padding:10px; width:190px;height:240px;background-color:#deeaf6;}
    .content .text input,.content .text label,.content .text a{ vertical-align:middle;height:20px;line-height:20px;}
    .content .text a{float:right; color:#696BF6;}
    .content input[type='text']{margin-bottom:15px;border:1px solid #CDCACA;width:100%; height:30px;border-radius:5px;background-color:#fff;}
    .button button{background:url("http://img.mukewang.com/539a972b00013e9102280177.jpg") no-repeat;width:100%;height:38px; margin-top:15px;border:none;
    }
    .button .btn1{background-position:0 0; }
    .button .btn2{background-position:0 -38px;  }
    .button span{display:inline-block; width:100%;height:15px;border-bottom:1px solid #ccc; }
</style>
<body>
<div class="content">
    <input type="text" placeholder="邮箱/手机号/用户名"/>
    <input type="text" placeholder="请输入密码"/>
    <div class="text">
        <input type="checkbox" id="box"/>
        <label for="box">下次自动登录</label>
         <a href="#">忘记密码?</a>
    </div>

    <div class="button">
        <button class="btn1"></button>

        <button class="btn2"></button>
    </div>
</div>
</body>
</html>

相关文章