CSS Sprites CSS3 Icon Font_html/css_WEB-ITnose

CSS Sprites CSS3 Icon Font

Many people in China call CSS Sprites CSS Sprites, which is a web image application processing method. It allows you to include all the scattered pictures involved in a page into one big picture, so that when the page is accessed, the loaded pictures will not be displayed one by one as before. . Position the background according to the position of the specific icon on the big picture.

The key to accelerating CSS Sprites is not to reduce the quality, but to reduce the number.

The big reason for making Sprites is the large traffic of images. Imagine if some small images were displayed in font mode, wouldn’t it be amazing? As CSS3 continues to enrich font styles, even in Chinese web pages, font-face has been given new application scenarios, that is, using Icon Font to replace images on the page. Icon Font, as it is usually referred to now, is a method of using font files instead of image files to display icons, special fonts and other elements.

There are many advantages to using fonts to implement icons: the font file is small, generally 20-50kb; it is vector and can be adapted to scale on different resolution screens without distortion; it is easy to edit and maintain, and the size and color can be Using CSS to control, you can add some visual effects such as: shadow, rotation, transparency; transparency is fully compatible with IE6; you don't have to worry about the compatibility of inline-block in the sprite icon, etc.

Because it is a font, it only supports solid colors on pictures, and multi-color ones are not supported; and the effect of many pictures Icon Font is difficult to achieve well, so combining the two is now popular Company practices, such as: APPLE, Taobao, etc.

1. CSS Sprites

CSS Sprites actually integrates some background images in the web page into an image file, and then uses CSS "background-image" and "background-repeat" to The combination of "background-position" performs background positioning. Background-position can accurately locate the position of the background image using numbers.

1. Create CSS Sprites images: 1). Drawing tools

Professional drawing includes Photoshop, fireworks, etc. I won’t describe how to make them here.

There are also some websites that make Sprites images, such as: http://css.spritegen.com/. Directly upload the pictures that need to be combined, automatically combine them, and generate codes; but you cannot change the position of the pictures according to your needs.

2). The idea of ​​drawing

Summary of technical points of CSS Sprites:

1). When integrating small pictures, arrange them from top to bottom instead of left to right.

The values ​​of background-position are arranged in this way at a glance, which is much more convenient when writing css. It is also for the sake of later maintenance. Imagine that if the size of one of the pictures is modified during later maintenance, the background-position of all surrounding elements will change accordingly, which will be a headache.

2). When integrating small pictures, try to be as far left or right as possible.

These two positions are very flexible and are very suitable for placing icons in front of text. When writing styles, they will not be interfered by other CSS Sprites images. Combining point 1, we can start integrating the picture from top to bottom along the leftmost and rightmost sides.

3). It is not recommended to leave gaps above and below different small pictures.

Because this will increase the image size and thus increase the file size. Of course, give each image enough space as well, since the elements using these images will often have a lot of content and may need extended spacing so that other images don't accidentally appear.

4). Merge images equally

When applying CSS Sprites images, merge identical images appropriately to save space and reduce volume.

5). Combining images with similar or identical colors can reduce the number of colors

Picture files with a small number of colors will have a relatively small file size.

6). Place the image in Sprites at a position relative to where it is to be displayed.

If we want an image to appear on the left side of an element, place that image on the right side of the sprite image, as shown in the figure

In this case, when you move the position of the background image through CSS, there will basically be no other images near it.

7). Avoid using bottom or right when positioning background-position.

Use the position of pixels and do not need to modify it when adding or changing image elements.

8). Image optimization: Convert the image to png8 format

In terms of image volume and size, it is recommended that the size be kept within 100K and the size be 800px (optimal size).

2. Use CSS Sprites

Source code download: https://github.com/cnblogs-/css-sprites-demo

Use CSS Sprites to create a demo example, the effect is as follows:

1) Sprites file

2) Implementation code:

Create a new demo.html, the code is as follows:

<!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="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>

Create basic.css with the following code:

* {    padding:0;    margin:0;}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 usage analysis 1) NetEase 163 mailbox login

163’s Sprites file

登陆的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文件

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

登陆的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: 700;    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首页的如下区域：

看到登陆中的人头了吗？看到绿色区域里的图标了吗？他们实际是使用的是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，是用字体文件取代图片文件，来展示图标、特殊字体等元素的方法。

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

非安全字体的解决方案
1）通过 CSS3 标准下的 @font-face 属性来指定和引入非缺省字体
2）使用cufon-yui.js库进行渲染
Cufon实现原理Cufon 技术的实现策略其实就是以一定标准，在网页相关位置上“画”出了所需要显示的文字字符，并同时替换原先区域所需要显示的文字。借助于浏览器所推出的专有页面绘画方案，如 VML、Canvas 和 SVG 等，来进行页面的绘画。缺点：js库文件比较大，字体需要转换成js文件。
3）Google font 或者 Google API
谷歌字体API实现原理谷歌字体API就是一个支持高质量的开源字体文件的服务，你可以轻而易举地在自己的网站设计中使用这些字体。该字体库还会不断发展，将会有越来越多的字体类型可供你选折。缺点：字体种类有限
4）图片代替：舍去，我们要代替图片。

2.Icon Font能干什么

3.Icon Font的优点

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

4.制作Icon Font

工具：

1.Photoshop

2.fontcreator，下载地址：http://www.high-logic.com/font-editor/fontcreator.html

3.在线字体转换工具：http://www.fontsquirrel.com/fontface/generator

制作的过程：

1）在UI设计中使用钢笔及形状工具绘制路径填充的矢量ICON。
2）放大路径，栅格化图层，以png24无损压缩格式为每一个字符输出一张图片。
3）在fontcreator中，新建字体文件。选中单个字体元素右键菜单“Import image”导入。
4）在fontcreator中，对字体的参数进行调整。
5）在fontcreator中，按F5对所有字符在类似于记事本中窗口中检查。调整合适后，保存为TTF格式。保存文件名和字体unicode编码。就可以给font-face使用了。

6）最后通过在线工具将字体文件转换成我们需要的.eot,.woff,.ttf,.svg多种格式。

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">&#x33;</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">&#xf0015;</i>                    <div class="name">牡羊座</div>                    <div class="code">&amp;#xf0015;</div>                    <div class="fontclass">.muyangzuo</div>                </li>                            <li>                <i class="icon iconfont">&#xf0014;</i>                    <div class="name">金牛座</div>                    <div class="code">&amp;#xf0014;</div>                    <div class="fontclass">.jinniuzuo</div>                </li>                            <li>                <i class="icon iconfont">&#xf0013;</i>                    <div class="name">双子座</div>                    <div class="code">&amp;#xf0013;</div>                    <div class="fontclass">.shuangzizuo</div>                </li>                            <li>                <i class="icon iconfont">&#xf0012;</i>                    <div class="name">天秤座</div>                    <div class="code">&amp;#xf0012;</div>                    <div class="fontclass">.tianchengzuo</div>                </li>                            <li>                <i class="icon iconfont">&#xf0011;</i>                    <div class="name">射手座</div>                    <div class="code">&amp;#xf0011;</div>                    <div class="fontclass">.sheshouzuo</div>                </li>                            <li>                <i class="icon iconfont">&#xf0010;</i>                    <div class="name">天蝎座</div>                    <div class="code">&amp;#xf0010;</div>                    <div class="fontclass">.tianhezuo</div>                </li>                            <li>                <i class="icon iconfont">&#xf000f;</i>                    <div class="name">巨蟹座</div>                    <div class="code">&amp;#xf000f;</div>                    <div class="fontclass">.juxiezuo</div>                </li>                            <li>                <i class="icon iconfont">&#xf000e;</i>                    <div class="name">狮子座</div>                    <div class="code">&amp;#xf000e;</div>                    <div class="fontclass">.shizizuo</div>                </li>                            <li>                <i class="icon iconfont">&#xf000c;</i>                    <div class="name">摩羯座</div>                    <div class="code">&amp;#xf000c;</div>                    <div class="fontclass">.mojiezuo</div>                </li>                            <li>                <i class="icon iconfont">&#xf000d;</i>                    <div class="name">处女座</div>                    <div class="code">&amp;#xf000d;</div>                    <div class="fontclass">.chunvzuo</div>                </li>                            <li>                <i class="icon iconfont">&#xf000b;</i>                    <div class="name">双鱼座</div>                    <div class="code">&amp;#xf000b;</div>                    <div class="fontclass">.shuangyuzuo</div>                </li>                            <li>                <i class="icon iconfont">&#xf000a;</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: 0;padding: 0;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: 0;  padding: 0;}/** 设置默认字体 **/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: 0; } /* img 搭车：让链接里的 img 无边框 */button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 *//* 注：optgroup 无法扶正 *//** 重置表格元素 **/table { border-collapse: collapse; border-spacing: 0; }/* 清除浮动 */.ks-clear:after, .clear:after {  content: '\20';  display: block;  height: 0;  clear: both;}.ks-clear, .clear {  *zoom: 1;}.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;}

效果如下：

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

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

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

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

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

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

display: block;

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

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

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

三.总结

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

完

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