WEB ICON 的探讨
一般考虑到webicon 就是cssSprite和自定义font；本文基于下述而总结和进行分析，如有笔误有望指出，谢谢
在线教程：用字体在网页中画ICON图标 http://www.imooc.com/learn/243
免费图标：
制作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 class="icon weibo "></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
@font-face demo
实践font-face
- 语义化实现(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 class="icon icon-spinner spinner"></i>
2. 兼容性实现
Css
@font-face{和上述一样}
.icon{和上述一样}
<i class="icon"></i>
&#x为16进制的转义序列,
公共优点 维持成本低 高清无码
缺点 文件大 简单单色(可以用css3做些投影 描边效果)
语义化实现与兼容性的区别在于维护的区别? 都要保存图片编码对应表以便修改
font制作教程在顶部
CSSSprite对比font-face
慕课网的案例
慕课课件 对于大图的简单icon 文字优越性还是很高的;
天猫官网
白色背景看不清下面是原图
还有杂色 所以就大小只做参考
现在可能有人觉得是笔误为啥文件大小和上述不一样，天猫我的图片也存在误导性；不过要更优化；肯定是做一个较大的图标进行缩放；然而天猫这个图标颜色不一样必然会做多一套；对于多个色系的图标，必然会出现很多；
两套对比下来好像font更好；其实font的图标过于单一；在于一些一些多色的图标；就不得不让设计师修改为这种矢量；不过做好一套就重用性较高；而且csssprite切图制作起来比较快，毕竟是位图；而图标太多的时候显得font的文件会很大的；
请针对项目来选取对应的技术
转载请保留源地址，谢谢
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
