页面中图标的使用 - 要饭的-HTML Tutorial-php.cn

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

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

在用到这些图片的时候，需要引用整张图片然后设定坐标到需要的那张小图上。
还有就是：图片根据颜色分组，分成多个文件。每张图只有一种颜色，这样让每张图片变得更小。
当然，这根据当前项目来选择适于你的方案。主要根据下面两个属性来处理精灵图：

<span style="color: #008080;">1</span> <span style="color: #800000;">background-image: url("...</span><span style="color: #008000;">/*</span><span style="color: #008000;">.png");
</span><span style="color: #008080;">2</span> <span style="color: #008000;">background-position: 0px 0px;
</span><span style="color: #008080;">3</span> 
<span style="color: #008080;">4</span> <span style="color: #008000;">/* 注意：position的负值情况。 </span><span style="color: #008000;">*/</span>

Copy after login

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

字体图标在html中的使用

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">><span style="color: #800000;">i </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="i-icon"</span><span style="color: #0000ff;">></span>﨡<span style="color: #0000ff;"></span><span style="color: #800000;">i</span><span style="color: #0000ff;">></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 注意：&#xfa21; fa21为16进制 需要&#x </span><span style="color: #008000;">--><br></span></span></span></span>

Copy after login

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

Copy after login

字体图标在css中的使用

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">i </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="icon icon-magic"</span><span style="color: #0000ff;">></span><span style="color: #800000;">i</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 直接引用class name </span><span style="color: #008000;">--></span></span></span>

Copy after login

<span style="color: #800000;">@font-face </span>{<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;"> "myfont"</span>;<span style="color: #ff0000;">
    src</span>:<span style="color: #0000ff;"> url("../ *.eot")</span>;<span style="color: #ff0000;">
    src</span>:<span style="color: #0000ff;"> url("../ *.eot?#iefix") format("embedded-opentype"), 
         url("../ *.woff") format("woff"), 
         url("../ *.ttf") format("truetype"), 
         url("../ *.svg") format("svg")</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> normal</span>;<span style="color: #ff0000;">
    font-style</span>:<span style="color: #0000ff;"> normal</span>;
  }<span style="color: #800000;">
  .icon </span>{<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;"> "myfont"</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> normal</span>;<span style="color: #ff0000;">
    font-style</span>:<span style="color: #0000ff;"> normal</span>;<span style="color: #ff0000;">
    -webkit-font-smoothing</span>:<span style="color: #0000ff;"> antialiased</span>;<span style="color: #ff0000;">
    -moz-osx-font-smoothing</span>:<span style="color: #0000ff;"> grayscale</span>;
  }<span style="color: #800000;">
  .icon-magic:before </span>{<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> "\c210"</span>;
  }

Copy after login

各种方式对比

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