• 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{

    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

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

    }

    <i class="icon icon-spinner spinner"></i>

    2. 兼容性实现

    Css

    @font-face{和上述一样}

    .icon{和上述一样}

    <i class="icon">&#xf048;</i>

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

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

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

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

    font制作教程在顶部

    CSSSprite对比font-face

     慕课网的案例

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

    天猫官网

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

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

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

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

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

    转载请保留源地址,谢谢

  • 相关阅读:
    Vue数据双向绑定原理
    JS递归
    JS数据结构-链表
    JS数据结构-树
    React性能优化手段
    Django请求的生命周期
    Devops-git初识
    Django数据迁移的问题
    无监控,不运维!运维监控工具平台建设总结
    数据库-数据类型及主键外键
  • 原文地址:https://www.cnblogs.com/moki/p/4366093.html
Copyright © 2020-2023  润新知