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

主要是使用了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"),/*?#iefix 多字体下ie6-8会把后续视为搜索条件*/

url("../fonts/imooc.woff") format("woff"),/* chrome、firefox */

url("../fonts/imooc.ttf") format("truetype"),/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/

url("../fonts/imooc.svg") format("svg");/* iOS 4.1- */

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";

}

2. 兼容性实现

Css

@font-face{和上述一样}

.icon{和上述一样}



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

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

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

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

font制作教程在顶部

CSSSprite对比font-face

慕课网的案例

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

天猫官网

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

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

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

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

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

转载请保留源地址，谢谢