你的位置:首页 > 网页设计

[网页设计]WEB ICON 的探讨


一般考虑到webicon 就是cssSprite和自定义font;本文基于下述而总结和进行分析,如有笔误有望指出,谢谢

在线教程:用字体在网页中画ICON图标 http://www.imooc.com/learn/243

免费图标:

https://icomoon.io/#home 

制作font教程:

webfont应用系列(一)位图如何转成矢量?http://ntesmailfetc.blog.163.com/blog/static/206287061201241854857235/

webfont应用系列(二)如何制作图标字体?http://ntesmailfetc.blog.163.com/blog/static/206287061201292631536545/

CSSSprite

对于小图标图片进行合并,

Css

.icon{

background: url(icon.png) no-repeat;

display: inline-block;

vertical-align: middle;

}

.icon_weibo{

width:24px;

height:19px;

background-position: -1px -45px;

}

Html

<i ></i>

主要是使用了background,把对应的元素背景定义为icon.png;而且修改icon的时候会改动图片和代码个人建议把icon.png放在css文件夹中 方便维护;

优点:图片小;兼容性好;图标可以颜色丰富

缺点:放大,模糊(R屏放大也在考虑范围) 维护成本高,

Font

首先需要理解各个字体格式的兼容性

 手册

 

脚本之家

@Font-face目前浏览器的兼容性:

•Webkit/Safari(3.2+):TrueType/OpenType TT (.ttf) 、OpenType PS (.otf);

•Opera (10+): TrueType/OpenType TT (.ttf) 、 OpenType PS (.otf) 、 SVG (.svg);

•Internet Explorer: 自ie4开始,支持EOT格式的字体文件;ie9支持WOFF;

•Firefox(3.5+): TrueType/OpenType TT (.ttf)、 OpenType PS (.otf)、 WOFF (since Firefox 3.6)

•Google Chrome:TrueType/OpenType TT (.ttf)、OpenType PS (.otf)、WOFF since version 6

由上面可以得出:.eot + .ttf /.otf + svg + woff = 所有浏览器的完美支持。

@Font-face 让所有浏览器都兼容的方法:

有一个专门用于@font-face 的字体网站:http://www.fontsquirrel.com/fontface/generator 

fontsquirrel 网站提供了一个免费的 @font-face Kit Generator工具,可以生成不同的字体格式,并且直接用css和html给出demo。使你可以直接引用到你的网站上。你可以直接使用 fontsquirrel 网站提供 的一些字体,也可以上传你自己的字体还是用。

@font-face Kit Generator demo

http://www.xunzou.com/demo/font-face/Chopin-Script-fontfacekit/demo.html  

@font-face Kit Generator demo

http://www.font2web.com/

@font-face demo

http://www.xunzou.com/demo/font-face/font-face.html

实践font-face

  1. 语义化实现(ie8以下不支持)

Css

@font-face{

       font-family: "imooc";

       src: url("../fonts/imooc.eot");/* IE9兼容 */

       src: url("../fonts/imooc.eot?#iefix") format("embedded-opentype"),

            url("../fonts/imooc.woff") format("woff"),

            url("../fonts/imooc.ttf") format("truetype"),

            url("../fonts/imooc.svg") format("svg");

       font-weight: normal;

       font-style: normal;

}

.icon{

       font-family: "imooc";

       font-weight: normal;

       font-style: normal;

       -webkit-font-smoothing: antialiased; //字体抗锯

       -moz-osx-font-smoothing: grayscale;

}

.icon-spinner:before {

       content: "\e600";

}

<i ></i>

 

2. 兼容性实现

Css

@font-face{和上述一样}

.icon{和上述一样}

<i >&#xf048;</i>

&#x为16进制的转义序列,

公共优点 维持成本低 高清无码

缺点 文件大 简单单色(可以用css3做些投影 描边效果)

语义化实现与兼容性的区别在于维护的区别? 都要保存图片编码对应表以便修改

font制作教程在顶部

CSSSprite对比font-face

 慕课网的案例

慕课课件 对于大图的简单icon 文字优越性还是很高的;

天猫官网

 

 

白色背景看不清下面是原图

还有杂色 所以就大小只做参考

现在可能有人觉得是笔误为啥文件大小和上述不一样,天猫我的图片也存在误导性;不过要更优化;肯定是做一个较大的图标进行缩放;然而天猫这个图标颜色不一样必然会做多一套;对于多个色系的图标,必然会出现很多;

两套对比下来好像font更好;其实font的图标过于单一;在于一些一些多色的图标;就不得不让设计师修改为这种矢量;不过做好一套就重用性较高;而且csssprite切图制作起来比较快,毕竟是位图;而图标太多的时候显得font的文件会很大的;

请针对项目来选取对应的技术

转载请保留源地址,谢谢