zoukankan      html  css  js  c++  java
  • 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的文件会很大的;

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

    转载请保留源地址,谢谢

  • 相关阅读:
    使用C#实现DHT磁力搜索的BT种子后端管理程序+数据库设计(开源)
    便携版WinSCP在命令行下同步文件夹
    ffmpeg (ffprobe)分析文件关键帧时间点
    sqlite删除数据或者表后,回收数据库文件大小
    ubuntu 20.04下 freeswitch 配合 fail2ban 防恶意访问
    ffmpeg使用nvenc编码的结论记录
    PC版跑跑卡丁车 故事模式 亚瑟传说章节 卡美洛庆典 2阶段 心灵之眼 攻略
    There was an error loading or playing the video
    Nvidia RTX Voice 启动报错修复方法
    火狐浏览器 关闭跨域限制
  • 原文地址:https://www.cnblogs.com/moki/p/4366093.html
Copyright © 2011-2022 走看看