新浦京81707con > 首页 > 图标字体,拥抱Web设计新趋势

原标题:图标字体,拥抱Web设计新趋势

浏览次数:88 时间:2019-05-02

拥抱Web设计新势头:SVG 百事可乐s实行应用

2016/07/30 · 澳门葡京真人娱乐,HTML5 · 1 评论 · Sprites, SVG

初稿出处: 坑坑洼洼实验室   

澳门葡京真人娱乐 1

澳门葡京真人娱乐 2

Logo字体 VS Sprite图——图标字体采纳实行

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

原稿出处: 人人网FED博客   

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

前言

乘势移动互连网的来临,各样高清显示屏移动装备的司空见惯,导致H5应用在运动设备retina显示屏下平时会遇上航海用体育场合标不分明的标题。

为了缓和荧屏分辨率对Logo影响的主题材料,日常使用CSS Sprite,Icon Font,CSS Icon以及SVG以适应@x1屏、@二屏、@叁屏,绝相比较较来说SVG矢量性、缩放无损等大多优点,更应受前端设计师的注重,可在多数商厦的移动项目选取中却很难得,究其主要原因在于SVG开荒学习花费比较高以及在绘制的特性上比PNG要差。此篇小说将从SVG赶快导出到SVG、SVG Symbol组件化在档案的次序中实战举办教学,并提供SVG Symbol神速导出工具,教你什么巩固SVG开荒作用减弱资金财产。

至于浏览器Logo消除方案,一贯就有众多 CSS Sprite,Icon Font,CSS Icon以及SVG.相对来说svg矢量Logo以及帮助浏览器本人分析的帮助和益处,多数团组织都早已在利用了。那篇文章主要表明svgLogo的选拔和创设。

雪碧图

七喜图实例:TaobaoPC端

澳门葡京真人娱乐 3

将多张小图放至一张大图

利用的时候,通过background-position调节彰显的职分,如下图所示:

澳门葡京真人娱乐 4

Pepsi-Cola图的运用方法

应用Sprite图唯一的长处,能够说正是缩减浏览器的央求次数。因为浏览器同一时半刻间能够加载的财富数是一定的,IE 八是5个,Chrome是四个,Firefox是7个。为了求证,写了以下html结构:(那部份纵然有点跑题,但是很要要求切磋一下)

澳门葡京真人娱乐 5

验证Chrome同时加载个数的html–诸多张十分大的图纸

然后在Chrome的开辟者工具里面包车型地铁Timeline能够观察Chrome确实是五个多少个加载的,每一回最多加载四个:

澳门葡京真人娱乐 6

Chrome同时最多加载资源数为陆个

Sprite图的制作方法能够用node的二个的包css-sprite,10分地方便人民群众。只要将Logo做好,放到相应的文件夹里面,写好计划文件运行,就可见生成对应的图片和css,无需和谐手动去调治地点等css属性。详见css-sprite

只是,使用Pepsi-Cola图存在不可制止的欠缺

SVG简介

SVG是1种开放标准的矢量图形语言,使用svg格式大家能够直接用代码来描写图像,可以用别样文字管理工具张开svg图像,通过改变部分代码来使图像具备交互功用,并得以天天插入到HTML中通过浏览器来浏览。

  • 演示地址
  • 代码

Sprite图的缺陷

SVG优缺点:

优点 缺点
1.缩放无损还原,显示清晰 1.SVG在绘制的性能上比PNG要差
2.语义性良好 2.局限性,对应单色或普通渐变没什么问题,但对不规则的渐变以及特效叠加效果显示不全
3.可用CSS控制图标样式以及动画 3.兼容性稍差,android4.1才开始支持
4.减少http请求 4.学习应用成本较高
SVG Sprite

历史观的做法
应用AI只怕统1SVG图像,然后用background-postion;
开荒AI,新建2个30 * 60(px)的画布,设置好网格和参照线.
用AI展开svg文件,然后复制路线到画布上调度大小

澳门葡京真人娱乐 7

任何就和css-sprite未有距离了

.icon-bg{
   display: inline-block;
   width: 30px; height: 30px;
   background: url(./res/svg-sprite-background.svg);
   background-size:100% 100%; 
  vertical-align: middle;
}
.icon-facebook-logo{
  background-position: 0 0;
 }
.icon-earth{ 
  background-position: 0 -30px;
}
.icon-like{ 
  background-position: 0 -60px;
}

html 中使用

<p class="btn-group">
   <a href="#" class="btn btn-default">

   </a> 
   <a href="#" class="btn btn-default">

   </a>
   <a href="#" class="btn btn-success">

   </a>
</p> 

效果如下:

澳门葡京真人娱乐 8

高清屏会失真

在二x的装置像素比的显示屏上举个例子mac,若是要达到和文字同样的清晰度,图片的肥瘦供给实际呈现大小的两倍,不然看起来会相比较模糊:读者能够对照左边文字和左边图片里文字的清晰度

澳门葡京真人娱乐 9

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

特别是当今手机绝大部份是高清屏了,举例iphone 陆 plus的分辨率达到了一九一八 * 1080,所认为了高清屏,使用Sprite图大概要预备各种口径的图片。

PS:SVG 为啥一贯不取代 iconfont?

1.PC 端 SVG 有包容性难点,因而 PC 端依旧用 iconfont 比较可相信。那么,与其为移动端多弄一套 SVG 方案,为何不直接公用同1套 iconfont 库?开支难题。

二.精晓 SVG 7-Up 的人不多,而 iconfont 简直成为前端面试必考题了。

三.抛开包容,再不怕SVG的局限性:单色或线性渐变(从左向右笔直进行潜移默化),径向渐变(从内到外实行圆形渐变)都没难题、然而不规则的渐变、就得以达成持续了。

肆.SVG比图片麻烦、设计稿即使不优化节点、直接导出、代码量那三个惊人,可是ai导出的SVG代码、节点优化后,也不能够直接用、还得小改、总体来讲SVG比图片好花费功力太多。

利用photoshop举办合并

或者过多Logo是图表形状。

  • 开荒Photoshop 新建3个30 *60 (px)的画布,大家安排30px *30px,设置好网格也许参考线
  • 用AI展开SVG文件,然后Ctrl C 复制路线,然后复制到photoshop文书档案中,选取图层形状,然后再进行调治
  • 选择 '文件' ->'导出' -> '路径到illustrator'
  • 保存为SVG

作用如下:

澳门葡京真人娱乐 10

  • 借使如此做,这就像荒废了SVG的众多脾性.

七喜图不便利变化

百事可乐图是一刘和平态的图形,当她转移的那天就已然了他要以什么样的主意体现,因而小编无法动态地更改他的水彩,不能够让他变大(大概会失真),无法像文字一样加1个影子效果等等。比方上边包车型地铁美食指南,hover可能选中的时候反色:

澳门葡京真人娱乐 11
澳门葡京真人娱乐 12

入选可能hover时反色

可能是某壹天UI要换颜色、某一天组长挂了,为表哀悼,为个公司的网站要换个土褐调。使用7-Up图时,全部的Logo都得重复制作。

动用Logo字体能够圆满消除地点的主题材料

Web应用中SVG的应用情势

SVG Pepsi-Cola的其它壹种完毕思路 <symbol> <use>

  • SVG <symbol>在svg中珍视适用于概念可复用的号子,而那些概念在symbol成分的模样将不会被出示出来,
    而是经过use成分引用来体现。

  • 在SVG中<use>能够在任什么地点方复用svg文件中定定义的的形,包蕴<g>和 <symbol>已经<defs>。

  • 在运用 use 时,它必须求有2个id,这样 use 通过xlink:href的值找到该形象的引用。注意,一定要在前边加
    一个#,那样本事引用ID成功。

    <svg width="300" height="300"> 
      <defs> 
        <g id="shape"> 
          <rect x="50" y="50" width="50" height="50" />
          <circle cx="50" cy="50" r="50" /> 
        </g>
      </defs> 
    
      <use xlink:href="#shape" x="50" y="50" /> 
      <use xlink:href="#shape" x="200" y="50" />
    </svg>
    

在使用use时,它必供给有二个id,那样use通过xlink:href的值找到该形象的引用.注意,一定要在前边加一个#,这样才具引用ID成功。

第二大家选取PS AI生成带有symbol的 SVG。

前方步骤与转移背景的图类似

澳门葡京真人娱乐 13

  • 开垦Symbols面板,在Window菜单栏中,或Shift Ctrl F1壹启用。然后,选中单个成分,点击增多。 澳门葡京真人娱乐 14

  • 给标识命名,该名称即为引用的ID 澳门葡京真人娱乐 15

  • 保留为SVG时,实际上生成的SVG代码并非大家要运用的,太过臃肿,能够到 http://www.zhangxinxu.com/sp/svg.html 进行拍卖下,方便使用查阅DEMO三管理后的代码

  • 在Html 里将SVG 放入,并隐藏;
    <svg style="display:none;"> <symbol id="earth" ... </path></symbol></svg>

使用:

  <svg class="icon icon-facebook"><use xlink:href="#facebook"></use></svg>

功用如下:

澳门葡京真人娱乐 16

能够通过CSS去决定填充(fill)或许描边的颜色(stroke)

  .icon-blue{ 
      fill:#1ba1e2;
   }

澳门葡京真人娱乐 17

使用 icomoon 制作SVG Sprite [推荐]
icommon不仅能够生成icon fonts还足以生成SVG Sprite.

澳门葡京真人娱乐 18

文件下载实现解压能够收获的公文夹里面会有demo.html 能够一贯打开源码参考使用.

澳门葡京真人娱乐 19

Logo字体icon font

Logo字体正是将Logo作成2个字体,使用时与普通字体无差别,可以安装字号大小、颜色、发光度等等,方便变化,最大亮点是怀有字体的矢量无失真特点,同时能够相称到IE 陆。还有三个优点是生成的公文尤其小,二壹四个Logo的变型的ttf字体文件才四一KB

澳门葡京真人娱乐 20

三个Logo字体里面包车型大巴因素

本文由新浦京81707con发布于首页,转载请注明出处:图标字体,拥抱Web设计新趋势

关键词: 新浦京81707con HTML5 前端基础类学

上一篇:制作图片粒子效果,打造高大上的Canvas粒子动画

下一篇:没有了