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


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

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


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


字体图标在html中的使用

1 <li><a href=""><i class="i-icon">i>a>li>
2 
登录后复制
 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 
登录后复制
@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
维护成本 比较困难简单简单
颜色丰富色彩单一色彩单一
缩放失真清晰清晰



09-17 18:39