zoukankan      html  css  js  c++  java
  • 页面中图标的使用

      之前说要整理这块内容,分享给大家,工作原因,直到现在,赶上清明宅在家里,赶紧整理出来与大家分享。


    精灵图(CSS sprite)
      所谓精灵图,其实就是把几张图拼成一张图。从而在低并发的浏览器上达到快速传输并呈现内容的目的(减少请求)。

    • 在用到这些图片的时候,需要引用整张图片然后设定坐标到需要的那张小图上。
    • 还有就是:图片根据颜色分组,分成多个文件。每张图只有一种颜色,这样让每张图片变得更小。
    • 当然,这根据当前项目来选择适于你的方案。主要根据下面两个属性来处理精灵图:
    1 background-image: url(".../*.png");
    2 background-position: 0px 0px;
    3 
    4 /* 注意:position的负值情况。 */


    先上几个图标网站,因为下面要介绍字体图标了:


    字体图标在html中的使用

    1 <li><a href=""><i class="i-icon">&#xfa21;</i></a></li>
    2 <!-- 注意:&#xfa21; fa21为16进制 需要&#x -->
     1  @font-face{
     2       font-family: "my-icon"
     3       src: url("../*.eot");
     4            /* ie低版本浏览器需要加'?' 否则可能回报404错误 */ 
     5       src: url("../ *.eot?") format("embedded-opentype")
     6            ,url("../ *.woff") format("woff")
     7            ,url("../ *.ttf") format("truetype")
     8            ,url("../ *.svg") format("svg");
     9            font-weight: normal;
    10            font-style: normal;
    11  }
    12  .i-icon{
    13         font-family: "my-icon";
    14         font-style: normal;
    15         font-weight: normal;
    16         font-size: 26px;
    17         -webkit-font-smoothing: antialiased; /*消除锯齿*/
    18         -moz-osx-font-smoothing: grayscale; /*消除锯齿*/
    19  }


    字体图标在css中的使用

    1 <li><i class="icon icon-magic"></i></li>
    2 <!-- 直接引用class name -->
    @font-face {
        font-family: "myfont";
        src: url("../ *.eot");
        src: url("../ *.eot?#iefix") format("embedded-opentype"), 
             url("../ *.woff") format("woff"), 
             url("../ *.ttf") format("truetype"), 
             url("../ *.svg") format("svg");
        font-weight: normal;
        font-style: normal;
      }
      .icon {
        font-family: "myfont";
        font-weight: normal;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      .icon-magic:before {
        content: "c210";
      }

     各种方式对比

      精灵图 在html中 在css中
    原理 使用图片定位 @font-face @font-face
    兼容  不支持低版本IE
    维护成本  比较困难 简单 简单
    颜色 丰富 色彩单一 色彩单一
    缩放 失真 清晰 清晰



     

     

     

     

     

  • 相关阅读:
    FZU 1759 欧拉函数 降幂公式
    51nod 1126 矩阵快速幂 水
    Codeforces Round #325 (Div. 2) D bfs
    Codeforces Round #379 (Div. 2) A B C D 水 二分 模拟
    Codeforces Round #284 (Div. 2)A B C 模拟 数学
    CentOS 7 rsync
    子进程 已安装 pre-removal 脚本 返回了错误号 1或2 与 子进程 已安装 post-installation 脚本 返回了错误号 1或2
    VirtualBox
    Eclipse 安装 HDFS 插件
    docker log 文件 清理
  • 原文地址:https://www.cnblogs.com/luqin/p/5350955.html
Copyright © 2011-2022 走看看