CSS Sprites+CSS3 Icon Font

CSS Sprites在国内很多人叫CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。根据具体图标在大图上的位置，给背景定位。

CSS Sprites加速的关键，不是降低质量，而是减少个数。

做成Sprites的很大的原因是图片流量大，想象一下，如果将一些小图片做成字体模式进行显示，会不会很神奇呢？随着CSS3对字体样式的不断丰富，即便在中文网页中对font-face赋于了新的应用场景，那就是用Icon Font代替页面中的图片。现在通常所指的Icon Font，是用字体文件取代图片文件，来展示图标、特殊字体等元素的方法。

使用字体来实现图标就有很多优势：字体文件小，一般20-50kb；矢量性，在不同的分辨率屏幕上适配缩放不失真；容易编辑和维护，尺寸和颜色可以用css来控制，可以添加一些视觉效果如：阴影、旋转、透明度；透明完全兼容IE6；还不用为sprite icon中的inline-block的兼容性烦恼等等。

由于是字体，所以只支持图片上是纯色的，多种颜色的就不支持了；而且很多图片的效果Icon Font很难很好的实现，所以将二者结合是现在很多公司的做法，如：APPLE、淘宝等。

一.CSS Sprites

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

1.制作CSS Sprites图片：

1）.制图工具

专业制图包括Photoshop、fireworks等。如何从设计稿切图，请看另一篇博文http://www.cnblogs.com/jingwhale/p/4396235.html

还有一些制作Sprites图片的网站，如：http://css.spritegen.com/。直接上传需要组合的图片，自动组合，并生成代码；但不能根据自己的需要更改图片的位置。

2).制图的思想

2.使用CSS Sprites

源代码下载：https://github.com/cnblogs-/css-sprites-demo

使用CSS Sprites建立demo示例，效果如下：

CSS Sprites+CSS3 Icon Font-LMLPHP

1）Sprites文件

CSS Sprites+CSS3 Icon Font-LMLPHP

2）实现代码：

新建demo.html，代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>切片demo</title>

    <link rel="stylesheet" type="text/css" href="style/basic.css">

</head>

<body>

    <div id="header">理解切片</div>

    <div id="slice">

    <h1><a href="###">更多</a></h1>

    <div>

        <h2>CSS Sprites + CSS3 Icon Font</h2>

        <dl>

            <dt><img src="data:images/v1.jpg" alt="CSS Sprites+CSS3 Icon Font" /></dt>

            <dd>CSS Sprites<br>CSS3 Icon Font</dd>

        </dl>

        <ul>

            <li><em>[02-08]</em>制作CSS Sprites图片 </li>

            <li><em>[02-08]</em>使用CSS Sprites </li>

            <li><em>[02-08]</em>什么是Icon Font </li>

            <li><em>[02-08]</em>如制作Icon Font </li>

            <li><em>[02-08]</em>如何使用Icon Font（依据Iconfont） </li>

        </ul>

    </div>

</div>

</body>

</html>

建立basic.css，代码如下：

* {

    padding:;

    margin:;

}

body {

    font-size:12px;

    background:#fff;

}

#header {

    font-size:30px;

    font-weight:bold;

    text-align:center;

    margin:30px;

}

#slice {

    width:400px;

    height:415px;

    background:url(../images/slice.gif) no-repeat -454px 53px;

    margin:0 auto;

}

#slice h1 {

    font-size:12px;

    width:400px;

    height:42px;

    background:url(../images/slice.gif) no-repeat -454px -13px;

    padding-top:7px;

}

#slice h1 a {

    width:45px;

    height:23px;

    display:block;

    margin-left:auto;

    background:url(../images/slice.gif) no-repeat -798px -230px;

    text-align:center;

    line-height:23px;

    color:#fff;

    font-size:12px;

    text-decoration:none;

    margin-right:9px;

}

#slice div {

    width:400px;

    height:340px;

    background:#fff url(../images/slice.gif) no-repeat -32px -14px;

    padding-top:10px;

}

#slice div h2 {

    width:371px;

    height:31px;

    background:#fff url(../images/slice.gif) no-repeat -466px -91px;

    font-size:12px;

    margin:0 auto;

    text-align:center;

    line-height:31px;

    color:#fff;

    margin-bottom:10px;

}

#slice div dl {

    width:137px;

    height:144px;

    background:#fff url(../images/slice.gif) no-repeat -495px -171px;

    margin:0 auto;

    padding-top:8px;

}

#slice div dl dt {

    width:121px;

    height:108px;

    background:#fff url(../images/slice.gif) no-repeat -658px -189px;

    margin:0 auto;

}

#slice div dl dt img {

    width:119px;

    height:91px;

    display:block;

    margin:0 auto;

    padding-top:1px;

}

#slice div dl dd {

    text-align:center;

    padding:4px 4px 0 4px;

    color:#fff;

}

#slice div ul {

    list-style-type:none;

    width:90%;

    margin:10px auto;

    line-height:200%;

    color:#666;

}

#slice div ul li {

    padding-left:15px;

    border-bottom:1px dashed #666;

    background:#fff url(../images/slice.gif) no-repeat -456px -140px;

}

#slice div ul li em {

    float:right;

    font-style:normal;

}

3.CSS Sprites使用分析

1）网易163邮箱登陆

CSS Sprites+CSS3 Icon Font-LMLPHP

163的Sprites文件

CSS Sprites+CSS3 Icon Font-LMLPHP

登陆的html代码：

<div class="loginFormBtn">

<button id="loginBtn" class="btn btn-main btn-login" type="submit" tabindex="6">登  录</button>

<a id="lfBtnReg" class="btn btn-side btn-reg" tabindex="7" target="_blank" href="http://reg.email.163.com/mailregAll/reg0.jsp?from=163mail_right">注  册</a>

</div>

登陆引用Sprites图片的CSS代码:

.themeCtrla, .loginFormIpt, .headerIntro, .verify-input-line, .themeText li, .btn, .btn-moblogin, .ico, .locationTestTitle, .verSelected, .servSelected, .locationTestTitleClose, #extText li, #mobtips_arr, #mobtips_close {

    background-image: url("http://mimg.127.net/index/163/img/2013/bg_v3.png");

}

2）淘宝

taobao的Sprites文件

CSS Sprites+CSS3 Icon Font-LMLPHP

看出taobao的登陆没用CSS精灵，而是用在如上显示的栏目中，此处不再解释taobao使用Sprites。我们看一下taobao的登陆：

CSS Sprites+CSS3 Icon Font-LMLPHP

登陆的html代码：

<button id="J_SubmitStatic" class="J_Submit" tabindex="5" type="submit">登　录</button>

登陆的CSS代码:

.login-box .submit button {

    background: none repeat scroll 0 0 #ff4700;

    border: 0 none;

    border-radius: 3px;

    color: #fff;

    cursor: pointer;

    display: inline-block;

    font-size: 16px;

    font-weight:;

    height: 38px;

    line-height: 36px;

    overflow: hidden;

    vertical-align: middle;

    width: 255px;

}

.login-box .submit button:hover, .login-submit button.hover {

    background: none repeat scroll 0 0 #f73500;

}

其实taobao的登陆没用CSS精灵，而是背景颜色+字体，没用图片。填入用户名和密码，点击登陆，将文字改为“正在登陆…”。我们再看一下taobao首页的如下区域：

CSS Sprites+CSS3 Icon Font-LMLPHP

看到登陆中的人头了吗？看到绿色区域里的图标了吗？他们实际是使用的是Icon Font，它们是字，而不是图。看代码：

人头的html代码:

<a class="btn-login" href="//login.taobao.com/member/login.jhtml?f=top&redirectURL=http%3A%2F%2Fwww.taobao.com%2F">

<i class="tb-fp-iconfont"></i>

登录

</a>

话费的html代码:

<a class="mod J_mod mod-hover" data-name="phone" href="http://wt.taobao.com/?ks-menu=cz" data-spm-anchor-id="1.7274553.754893129.1" style="position: relative;">

<i class="tb-fp-iconfont"></i>

<p>话费</p>

<span class="mod-arrow">

</a>

图标都是用

<i class="tb-fp-iconfont"></i>

引用，证明是文字显示为图标。

其实Alibaba早已建成了Iconfont-阿里巴巴矢量图标库，网址：http://iconfont.cn/。下面我们介绍CSS3 Icon Font 。

二.CSS3 Icon Font

1.什么是Icon Font

我们现在通常所指的Icon Font，是用字体文件取代图片文件，来展示图标、特殊字体等元素的方法。

网页安全字体与非安全字体：所有平台都预装的字体，被称为“安全字体”，因为它可以保证所有用户的视觉效果是一样的。反之，仅仅少数平台或终端上安装的字体，为非安全字体。

2.Icon Font能干什么

CSS Sprites+CSS3 Icon Font-LMLPHP

3.Icon Font的优点

4.制作Icon Font

工具：

制作的过程：

Alibaba的Iconfont制作使用AI，具体步骤：http://www.iconfont.cn/help/iconmake.html

5.如何使用（依据Iconfont）

第一步：使用font-face声明字体

@font-face {font-family: 'iconfont';

    src: url('iconfont.eot'); /* IE9*/

    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

    url('iconfont.woff') format('woff'), /* chrome、firefox */

    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/

    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */

}

第二步：定义使用iconfont的样式

.iconfont{

    font-family:"iconfont" !important;

    font-size:16px;font-style:normal;

    -webkit-font-smoothing: antialiased;

    -webkit-text-stroke-width: 0.2px;

    -moz-osx-font-smoothing: grayscale;

}

第三步：挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">3</i>

示例如下。源码地址：https://github.com/cnblogs-/css3-iconfont-constellations

新建constellations.html，代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>constellations</title>

    <link rel="stylesheet" href="constellations.css">

    <link rel="stylesheet" href="iconfont.css">

</head>

<body>

    <div class="main">

        <h1>IconFont 图标</h1>

        <ul class="icon_lists clear">

                <li>

                <i class="icon iconfont">󰀕</i>

                    <div class="name">牡羊座</div>

                    <div class="code">&amp;#xf0015;</div>

                    <div class="fontclass">.muyangzuo</div>

                </li>

                <li>

                <i class="icon iconfont">󰀔</i>

                    <div class="name">金牛座</div>

                    <div class="code">&amp;#xf0014;</div>

                    <div class="fontclass">.jinniuzuo</div>

                </li>

                <li>

                <i class="icon iconfont">󰀓</i>

                    <div class="name">双子座</div>

                    <div class="code">&amp;#xf0013;</div>

                    <div class="fontclass">.shuangzizuo</div>

                </li>

                <li>

                <i class="icon iconfont">󰀒</i>

                    <div class="name">天秤座</div>

                    <div class="code">&amp;#xf0012;</div>

                    <div class="fontclass">.tianchengzuo</div>

                </li>

                <li>

                <i class="icon iconfont">󰀑</i>

                    <div class="name">射手座</div>

                    <div class="code">&amp;#xf0011;</div>

                    <div class="fontclass">.sheshouzuo</div>

                </li>

                <li>

                <i class="icon iconfont">󰀐</i>

                    <div class="name">天蝎座</div>

                    <div class="code">&amp;#xf0010;</div>

                    <div class="fontclass">.tianhezuo</div>

                </li>

                <li>

                <i class="icon iconfont">󰀏</i>

                    <div class="name">巨蟹座</div>

                    <div class="code">&amp;#xf000f;</div>

                    <div class="fontclass">.juxiezuo</div>

                </li>

                <li>

                <i class="icon iconfont">󰀎</i>

                    <div class="name">狮子座</div>

                    <div class="code">&amp;#xf000e;</div>

                    <div class="fontclass">.shizizuo</div>

                </li>

                <li>

                <i class="icon iconfont">󰀌</i>

                    <div class="name">摩羯座</div>

                    <div class="code">&amp;#xf000c;</div>

                    <div class="fontclass">.mojiezuo</div>

                </li>

                <li>

                <i class="icon iconfont">󰀍</i>

                    <div class="name">处女座</div>

                    <div class="code">&amp;#xf000d;</div>

                    <div class="fontclass">.chunvzuo</div>

                </li>

                <li>

                <i class="icon iconfont">󰀋</i>

                    <div class="name">双鱼座</div>

                    <div class="code">&amp;#xf000b;</div>

                    <div class="fontclass">.shuangyuzuo</div>

                </li>

                <li>

                <i class="icon iconfont">󰀊</i>

                    <div class="name">水瓶座</div>

                    <div class="code">&amp;#xf000a;</div>

                    <div class="fontclass">.shuipingzuo</div>

                </li>

        </ul>

    </div>

</body>

</html>

使用font-face声明字体，并定义使用iconfont的样式。新建iconfont.css代码如下：

@font-face {font-family: "iconfont";

  src: url('iconfont.eot'); /* IE9*/

  src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

  url('iconfont.woff') format('woff'), /* chrome、firefox */

  url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/

  url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */

}

.iconfont {

  font-family:"iconfont" !important;

  font-size:16px;

  font-style:normal;

  -webkit-font-smoothing: antialiased;

  -webkit-text-stroke-width: 0.2px;

  -moz-osx-font-smoothing: grayscale;

}

.icon-muyangzuo:before { content: "\f0015"; }

.icon-jinniuzuo:before { content: "\f0014"; }

.icon-shuangzizuo:before { content: "\f0013"; }

.icon-tianchengzuo:before { content: "\f0012"; }

.icon-sheshouzuo:before { content: "\f0011"; }

.icon-tianhezuo:before { content: "\f0010"; }

.icon-juxiezuo:before { content: "\f000f"; }

.icon-shizizuo:before { content: "\f000e"; }

.icon-mojiezuo:before { content: "\f000c"; }

.icon-chunvzuo:before { content: "\f000d"; }

.icon-shuangyuzuo:before { content: "\f000b"; }

.icon-shuipingzuo:before { content: "\f000a"; }

控制样式，新建constellations.css代码如下：

*{margin:;padding:;list-style: none;}

/** 清除内外边距 **/

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */

dl, dt, dd, ul, ol, li, /* list elements 列表元素 */

pre, /* text formatting elements 文本格式元素 */

form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */

th, td /* table elements 表格元素 */ {

  margin:;

  padding:;

}

/** 设置默认字体 **/

body,

button, input, select, textarea /* for ie */ {

  font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;

}

h1, h2, h3, h4, h5, h6 { font-size: 100%; }

address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */

code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */

small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */

/** 重置列表元素 **/

ul, ol { list-style: none; }

/** 重置文本格式元素 **/

a { text-decoration: none; }

a:hover { text-decoration: underline; }

/** 重置表单元素 **/

legend { color: #000; } /* for ie6 */

fieldset, img { border:; } /* img 搭车：让链接里的 img 无边框 */

button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */

/* 注：optgroup 无法扶正 */

/** 重置表格元素 **/

table { border-collapse: collapse; border-spacing:; }

/* 清除浮动 */

.ks-clear:after, .clear:after {

  content: '\20';

  display: block;

  height:;

  clear: both;

}

.ks-clear, .clear {

  *zoom:;

}

.main {padding: 30px 100px;}

.main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}

.icon_lists li{

  float:left;

  width: 100px;

  height:180px;

  text-align: center;

}

.icon_lists .icon{

  font-size: 42px;

  line-height: 100px;

  margin: 10px 0;

  color:#333;

  -webkit-transition: font-size 0.25s ease-out 0s;

  -moz-transition: font-size 0.25s ease-out 0s;

  transition: font-size 0.25s ease-out 0s;

}

.icon_lists .icon:hover{

  font-size: 100px;

}

效果如下：

CSS Sprites+CSS3 Icon Font-LMLPHP

6.pc端应用常见问题(Iconfont)

1）字体图标在safair或chrome浏览器下被加粗

CSS Sprites+CSS3 Icon Font-LMLPHP

以上现象是由于字体图标存在半个像素的锯齿，在浏览器渲染的时候直接显示一个像素了，导致在有背景下的图标显示感觉加粗；所以在应用字体图标的时候需要对图标样式进行抗锯齿处理，CSS代码设置如下：

.iconfont{-webkit-font-smoothing: antialiased;}

2)字体图标在IE7浏览器显示中图标右侧出现小方框现象

CSS Sprites+CSS3 Icon Font-LMLPHP

出现以上现象可以对引用字体图标的非块标签进行以下CSS定义:

display: block;

3)字体图标在pc端的chrome浏览器下出现严重的锯齿

CSS Sprites+CSS3 Icon Font-LMLPHP

出现以上现象可以对字体图标的边缘进行模糊；（只支持webkit内核浏览器,参数数值不宜设置得很大，这会带来图标加粗的问题）

-webkit-text-stroke-width: 0.2px;

三.总结

Sprites利用减少http请求，减少流量；Icon Font利用其对图标的操作灵敏性，两者结合使用，可以达到很好的效果。

完

转载需注明转载字样，标注原作者和原博文地址。