浅谈雪碧图和字体图标,图标字体

Logo字体 VS Coca Cola图——图标字体采行

2017/04/05 · HTML5 · 1
评论 ·
Logo字体

浅谈雪碧图和字体图标,图标字体。原来的书文出处:
人人网FED博客   

正文介绍使用Logo字体和SVG替代Pepsi-Cola图的主意。七喜图是多多益善网址常常选用的一种本事,可是它有缺点:高清屏会模糊、不或然动态变化如hover时候反色。而利用Logo字体能够圆满消除上述难题,同时具备包容性好,生成的公文小等优点。

一.CSS Coca Cola(7-Up图|Smart图)指什么? 有怎样服从

  • CSS
    雪碧s是一种网页图片选用管理方式。它同意你将3个页面涉及到的具有零星图片都包括到一张大图中去,那样一来,当访问该页面时,载入的图样就不会像从前那么一幅1幅地稳步呈现出来了。
  • CSS
    Pepsi-Colas的规律其实便是把网页中某些背景图片整合到一张图纸文件中,再选拔CSS的“background-image”,“background-
    repeat”,“background-position”的结合张开背景定位,background-position能够用数字能纯粹的定点出背景图片的岗位。

起因

今昔是前者才具的大学一年级时。若干年过去之后,恐怕大家会感叹多数,当年阿当的一篇博文多么的锐利。vue和angular的闹剧。近日临危受命,要做几天的前端开采。说是前端开采,其实就是写html+css+JavaScript,真的,当你面对庞大的前端才干体系心中无数的时候,用最简便易行的手艺来一场放松吗。

那一次支付,未有何更加的,便是本身在小图标浮现的时候。在Pepsi-Cola图和Logo字体中徘徊了很久。于是,简单研究了瞬间,就当立3个flag,日后在探索一下。

前不久攻读了Coca Cola图的利用,7-Up图的便宜那块就不多说了,只说选拔有的。

雪碧图

Pepsi-Cola图实例:TmallPC端

图片 1

将多张小图放至一张大图

利用的时候,通过background-position调解展现的义务,如下图所示:

图片 2

七喜图的运用格局

应用Sprite图唯壹的优点,能够说就是收缩浏览器的央浼次数。因为浏览器同目前间能够加载的能源数是确定的,IE
8是伍个,Chrome是5个,Firefox是柒个。为了证实,写了以下html结构:(那部份纵然有点跑题,可是很要供给探求一下)

图片 3

验证Chrome同时加载个数的html–大多张一点都不小的图纸

接下来在Chrome的开辟者工具里面包车型地铁Timeline能够见见Chrome确实是陆个多少个加载的,每一次最多加载陆个:

图片 4

Chrome同时最多加载能源数为多少个

7-Up图的制作方法能够用node的二个的包css-sprite,13分地便民。只要将Logo做好,放到相应的文书夹里面,写好安插文件运转,就能够转移对应的图片和css,无需自身手动去调度任务等css属性。详见css-sprite

只是,使用七喜图存在不可幸免的欠缺

作用
  • 应用CSS
    Pepsi-Colas能很好地压缩了网页的http请求,从而大大的进步了页面包车型地铁属性
  • CSS
    Pepsi-Colas能压缩图片的字节,比如3张图纸合并成1张图纸的字节总是小于那三张图片的字节总和
  • CSS
    Pepsi-Colas消除了网页设计员在图纸命名上的麻烦,只需对一张汇集的图纸上命名就足以了,不需求对每二个小成分进行命名,从而进步了网页的造作作用。
  • 转移风格方便,只必要在一张或少张图片上改动图片的颜色或样式,整个网页的风骨就足以改动。维护起来尤其方便人民群众

雪碧图

除此而外叫Sprite图外,它还有为数不少名字,css sprite, css
Smart等。原理正是将部分小Logo合并到一张图片上,然后用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属性值的坐标。

Coca Cola图的症结

贰.img标签和CSS背景使用图片在利用情状上有啥分裂

img标签一般用来能够点击跳转链接只怕可以本性化定制改造(如登入头像)的图形,css背景相似是原则性不改变的内容(如logo),点击后不会跳转到新页面
css背景相似用来静态不改变的图纸。能够是页面LOGO等。

Logo字体

能够缩放的矢量Logo。你能够动用CSS对它们进行退换:大小,颜色,阴影等。体量特别的小。可能几百个Logo才几10KB。

工具

iconfont是Ali提供3个矢量Logo库。

fontawesome
外国壹款不错的Logo库,用bootstrap的都不不熟悉了。

栗子:

iconfont和fontawesome合法都提供了很详细的选拔教程,那里不就不做赘述了。
粗略的写了二个小demo。能够去大致的看一下。

优点

  • 高清保真,因为是SVG图形。
  • 世故,能够设置大小,颜色等。
  • 兼容性好,支持IE6
  • 开源的字体库诸多
  • 减少HTTP请求

缺点

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

高清屏会失真

在二x的装置像素比的荧屏上比如mac,假设要完结和文字同样的清晰度,图片的增进率供给实际展现大小的两倍,不然看起来会相比模糊:读者能够相比较左侧文字和左边图片里文字的清晰度

图片 7

左边图片里的文字比左边字体的文字模糊

专程是明日手提式有线话机绝大部份是高清屏了,举例iphone 陆 plus的分辨率达到了1917 *
1080,所以为了高清屏,使用Pepsi-Cola图大概要忧盛危明三种规范化的图样。

三.title 和 alt属性分别有怎样意义

  • title
    属性规定关于成分的额外音信,这一个新闻一般会在鼠标移到元素上时显得1段提醒文本
    title 属性常与 form 以及 a
    成分一齐使用,以提供关于输入格式和链接目的的新闻
  • alt 属性是一个必备的属性,它规定在图像无法展现时的替代文本
    ![](/i/eg_tulip.jpg)
    当图片不能够呈现时,就会形成上边那么些样子:

    图片 8

总结

那篇小说只是浅谈了有的雪碧图和Logo字体,未有太过的深深,也算是1篇工具介绍吧。那二种格局的面世,皆感到着裁减HTTP请求次数。优化和提拔网页的访问速度。各有优劣。假使实际支出中,能够三种艺术结合着来。

小栗子

sprite-generator

iconfont

fontawesome

质地取自慕课网百事可乐图课程

百事可乐图不便于变化

Pepsi-Cola图是一汪林海态的图片,当他转移的那天就决定了她要以什么样的办法呈现,由此笔者不能够动态地改换她的颜色,没办法让他变大(恐怕会失真),不能够像文字同样加三个投影效果等等。举个例子上面包车型大巴菜单,hover或许选中的时候反色:

图片 9
图片 10

当选恐怕hover时反色

依然是某一天UI要换颜色、某壹天CEO挂了,为表哀悼,为个厂商的网址要换个海赫色调。使用七喜图时,全部的Logo都得重新创立。

行使Logo字体能够健全消除地点的难点

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>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图