您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > CSS Sprites+CSS3 Icon Font圖標(biāo)使用方法

CSS Sprites+CSS3 Icon Font圖標(biāo)使用方法

文章來(lái)源：365jz.com 點(diǎn)擊數(shù)：417 更新時(shí)間：2018-07-29 11:51 參與評(píng)論

CSS Sprites在國(guó)內(nèi)很多人叫CSS精靈，是一種網(wǎng)頁(yè)圖片應(yīng)用處理方式。它允許你將一個(gè)頁(yè)面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來(lái)，當(dāng)訪(fǎng)問(wèn)該頁(yè)面時(shí)，載入的圖片就不會(huì)像以前那樣一幅一幅地慢慢顯示出來(lái)了。根據(jù)具體圖標(biāo)在大圖上的位置，給背景定位。

CSS Sprites加速的關(guān)鍵，不是降低質(zhì)量，而是減少個(gè)數(shù)。

做成Sprites的很大的原因是圖片流量大，想象一下，如果將一些小圖片做成字體模式進(jìn)行顯示，會(huì)不會(huì)很神奇呢？隨著CSS3對(duì)字體樣式的不斷豐富，即便在中文網(wǎng)頁(yè)中對(duì)font-face賦于了新的應(yīng)用場(chǎng)景，那就是用Icon Font代替頁(yè)面中的圖片?，F(xiàn)在通常所指的Icon Font，是用字體文件取代圖片文件，來(lái)展示圖標(biāo)、特殊字體等元素的方法。

使用字體來(lái)實(shí)現(xiàn)圖標(biāo)就有很多優(yōu)勢(shì)：字體文件小，一般20-50kb；矢量性，在不同的分辨率屏幕上適配縮放不失真；容易編輯和維護(hù)，尺寸和顏色可以用css來(lái)控制，可以添加一些視覺(jué)效果如：陰影、旋轉(zhuǎn)、透明度；透明完全兼容IE6；還不用為sprite icon中的inline-block的兼容性煩惱等等。

由于是字體，所以只支持圖片上是純色的，多種顏色的就不支持了；而且很多圖片的效果Icon Font很難很好的實(shí)現(xiàn)，所以將二者結(jié)合是現(xiàn)在很多公司的做法，如：APPLE、淘寶等。

一.CSS Sprites

CSS Sprites其實(shí)就是把網(wǎng)頁(yè)中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字精確的定位出背景圖片的位置。

1.制作CSS Sprites圖片：

1）.制圖工具

專(zhuān)業(yè)制圖包括Photoshop、fireworks等。如何從設(shè)計(jì)稿切圖，請(qǐng)看另一篇博文http://theartemis.cn/article/24507

還有一些制作Sprites圖片的網(wǎng)站，如：http://css.spritegen.com/。直接上傳需要組合的圖片，自動(dòng)組合，并生成代碼；但不能根據(jù)自己的需要更改圖片的位置。

2).制圖的思想

CSS Sprites 技術(shù)要點(diǎn)總結(jié)：
1）. 小圖片整合時(shí)，按照從上到下的順序，而不要從左到右排列。
這樣排列 background-position 的值一目了然，寫(xiě) css 時(shí)方便許多。同時(shí)也是為了后期維護(hù)著想。想象一下，如果后期維護(hù)時(shí)，修改其中某個(gè)圖片的尺寸，那么周?chē)乃性氐腷ackground-position 就會(huì)隨之改變，這將會(huì)是一件很頭疼的事情。
2）. 小圖片整合時(shí)盡量靠最左邊戒者最右邊。
這兩個(gè)位置很靈活，非常適合擺放文本前的 icon，再寫(xiě)樣式時(shí)不會(huì)受到其它 CSS Sprites 圖片干預(yù)。綜合第 1 點(diǎn)，我們可以沿著最左邊和最右邊的兩側(cè)開(kāi)始由上至下整合圖片。
3）. 不建議在不同小圖片上下留間隔。
因?yàn)檫@樣會(huì)導(dǎo)致圖片 size 增大從而增加文件的大小。當(dāng)然，也要給每個(gè)圖片足夠的空間，因?yàn)槭褂眠@些圖片的元素通常都會(huì)有大量的內(nèi)容而且可能會(huì)需要擴(kuò)展的間距，以至于其它圖片不會(huì)意外出現(xiàn)。
4）.圖片對(duì)等合并
應(yīng)用CSS Sprites圖片時(shí)，適當(dāng)?shù)匕褜?duì)等相同的圖像合并，以節(jié)省空間及減少體積。
5）. 把圖片中顏色較近戒相同的組合在一起可以降低顏色數(shù)
少色數(shù)的圖片文件體積會(huì)相對(duì)的小。
6）.在Sprites中把圖片放在它要顯示的地方的相對(duì)的位置
如果我們希望一個(gè)圖片出現(xiàn)在一個(gè)元素的左側(cè)，將那個(gè)圖片放到 sprite 圖片的右邊，如圖
這樣的話(huà)，當(dāng)你通過(guò)CSS 移勱背景圖片的位置的時(shí)候，基本不會(huì)有其它的圖片出現(xiàn)在它的附近。
7）. background-position定位時(shí)避免使用 bottom 或 right 等
使用像素的位置來(lái)，當(dāng)增加或變更圖片元素時(shí)不用修改。
8）.圖片優(yōu)化：將圖片轉(zhuǎn)成 png8 格式
圖片體積及尺寸方面，建議體積保持在100K以?xún)?nèi)，size為800px(最佳尺寸)。

2.使用CSS Sprites

源代碼下載：https://github.com/cnblogs-/css-sprites-demo

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

1）Sprites文件

slice

2）實(shí)現(xiàn)代碼：

新建demo.html，代碼如下：

復(fù)制代碼

<!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（依據(jù)Iconfont） </li>
        </ul>
    </div></div>
    </body></html>

復(fù)制代碼

建立basic.css，代碼如下：

復(fù)制代碼

* {
    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;
}

復(fù)制代碼

3.CSS Sprites使用分析

1）網(wǎng)易163郵箱登陸

163

163的Sprites文件

clipboard[4]

登陸的html代碼：

復(fù)制代碼

<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">注  冊(cè)</a></div>

復(fù)制代碼

登陸引用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文件

clipboard[8]

看出taobao的登陸沒(méi)用CSS精靈，而是用在如上顯示的欄目中，此處不再解釋taobao使用Sprites。我們看一下taobao的登陸：

taobao[14]

登陸的html代碼：

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

登陸的CSS代碼:

復(fù)制代碼

.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;
}

復(fù)制代碼

其實(shí)taobao的登陸沒(méi)用CSS精靈，而是背景顏色+字體，沒(méi)用圖片。填入用戶(hù)名和密碼，點(diǎn)擊登陸，將文字改為“正在登陸…”。我們?cè)倏匆幌聇aobao首頁(yè)的如下區(qū)域：

看到登陸中的人頭了嗎？看到綠色區(qū)域里的圖標(biāo)了嗎？他們實(shí)際是使用的是Icon Font，它們是字，而不是圖?？创a：

人頭的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>

話(huà)費(fèi)的html代碼:

復(fù)制代碼

<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>話(huà)費(fèi)</p><span class="mod-arrow"></a>

復(fù)制代碼

圖標(biāo)都是用

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

引用，證明是文字顯示為圖標(biāo)。

其實(shí)Alibaba早已建成了Iconfont-阿里巴巴矢量圖標(biāo)庫(kù)，網(wǎng)址：http://iconfont.cn/。下面我們介紹CSS3 Icon Font 。

二.CSS3 Icon Font

1.什么是Icon Font

我們現(xiàn)在通常所指的Icon Font，是用字體文件取代圖片文件，來(lái)展示圖標(biāo)、特殊字體等元素的方法。

網(wǎng)頁(yè)安全字體與非安全字體：所有平臺(tái)都預(yù)裝的字體，被稱(chēng)為“安全字體”，因?yàn)樗梢员ＷC所有用戶(hù)的視覺(jué)效果是一樣的。反之，僅僅少數(shù)平臺(tái)或終端上安裝的字體，為非安全字體。

非安全字體的解決方案
1）通過(guò) CSS3 標(biāo)準(zhǔn)下的 @font-face 屬性來(lái)指定和引入非缺省字體
2）使用cufon-yui.js庫(kù)進(jìn)行渲染
Cufon實(shí)現(xiàn)原理Cufon 技術(shù)的實(shí)現(xiàn)策略其實(shí)就是以一定標(biāo)準(zhǔn)，在網(wǎng)頁(yè)相關(guān)位置上“畫(huà)”出了所需要顯示的文字字符，并同時(shí)替換原先區(qū)域所需要顯示的文字。借助于瀏覽器所推出的專(zhuān)有頁(yè)面繪畫(huà)方案，如 VML、Canvas 和 SVG 等，來(lái)進(jìn)行頁(yè)面的繪畫(huà)。缺點(diǎn)：js庫(kù)文件比較大，字體需要轉(zhuǎn)換成js文件。
3）Google font 或者 Google API
谷歌字體API實(shí)現(xiàn)原理谷歌字體API就是一個(gè)支持高質(zhì)量的開(kāi)源字體文件的服務(wù)，你可以輕而易舉地在自己的網(wǎng)站設(shè)計(jì)中使用這些字體。該字體庫(kù)還會(huì)不斷發(fā)展，將會(huì)有越來(lái)越多的字體類(lèi)型可供你選折。缺點(diǎn)：字體種類(lèi)有限
4）圖片代替：舍去，我們要代替圖片。

2.Icon Font能干什么

3.Icon Font的優(yōu)點(diǎn)

?字體文件小，一般20-50kb
?矢量性，在不同的分辨率屏幕上適配縮放不失真
?容易編輯和維護(hù)，尺寸和顏色可以用css來(lái)控制，可以添加一些視覺(jué)效果如：陰影、旋轉(zhuǎn)、透明度
?透明完全兼容IE6
?不用為sprite icon中的inline-block的兼容性煩惱等等

4.制作Icon Font

工具：

1.Photoshop
2.fontcreator，下載地址：http://www.high-logic.com/font-editor/fontcreator.html
3.在線(xiàn)字體轉(zhuǎn)換工具：http://www.fontsquirrel.com/fontface/generator

制作的過(guò)程：

1）在UI設(shè)計(jì)中使用鋼筆及形狀工具繪制路徑填充的矢量ICON。
2）放大路徑，柵格化圖層，以png24無(wú)損壓縮格式為每一個(gè)字符輸出一張圖片。
3）在fontcreator中，新建字體文件。選中單個(gè)字體元素右鍵菜單“Import image”導(dǎo)入。
4）在fontcreator中，對(duì)字體的參數(shù)進(jìn)行調(diào)整。
5）在fontcreator中，按F5對(duì)所有字符在類(lèi)似于記事本中窗口中檢查。調(diào)整合適后，保存為T(mén)TF格式。保存文件名和字體unicode編碼。就可以給font-face使用了。
6）最后通過(guò)在線(xiàn)工具將字體文件轉(zhuǎn)換成我們需要的.eot,.woff,.ttf,.svg多種格式。

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

5.如何使用（依據(jù)Iconfont）

第一步：使用font-face聲明字體

復(fù)制代碼

@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- */}

復(fù)制代碼

第二步：定義使用iconfont的樣式

復(fù)制代碼

.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;
}

復(fù)制代碼

第三步：挑選相應(yīng)圖標(biāo)并獲取字體編碼，應(yīng)用于頁(yè)面

<i class="iconfont">&#x33;</i>

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

新建constellations.html，代碼如下：

復(fù)制代碼

<!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 圖標(biāo)</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">雙魚(yú)座</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>

復(fù)制代碼

使用font-face聲明字體，并定義使用iconfont的樣式。新建iconfont.css代碼如下：

復(fù)制代碼

@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"; }

復(fù)制代碼

控制樣式，新建constellations.css代碼如下：

復(fù)制代碼

*{margin: 0;padding: 0;list-style: none;}/** 清除內(nèi)外邊距 **/body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 結(jié)構(gòu)元素 */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;
}/** 設(shè)置默認(rèn)字體 **/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; } /* 統(tǒng)一等寬字體 */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 搭車(chē)：讓鏈接里的 img 無(wú)邊框 */button, input, select, textarea { font-size: 100%; } /* 使得表單元素在 ie 下能繼承字體大小 *//* 注：optgroup 無(wú)法扶正 *//** 重置表格元素 **/table { border-collapse: collapse; border-spacing: 0; }/* 清除浮動(dòng) */.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;
}

復(fù)制代碼

效果如下：

IconFont

6.pc端應(yīng)用常見(jiàn)問(wèn)題(Iconfont)

1）字體圖標(biāo)在safair或chrome瀏覽器下被加粗

以上現(xiàn)象是由于字體圖標(biāo)存在半個(gè)像素的鋸齒，在瀏覽器渲染的時(shí)候直接顯示一個(gè)像素了，導(dǎo)致在有背景下的圖標(biāo)顯示感覺(jué)加粗；所以在應(yīng)用字體圖標(biāo)的時(shí)候需要對(duì)圖標(biāo)樣式進(jìn)行抗鋸齒處理，CSS代碼設(shè)置如下：

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

2)字體圖標(biāo)在IE7瀏覽器顯示中圖標(biāo)右側(cè)出現(xiàn)小方框現(xiàn)象

出現(xiàn)以上現(xiàn)象可以對(duì)引用字體圖標(biāo)的非塊標(biāo)簽進(jìn)行以下CSS定義:

display: block;

3)字體圖標(biāo)在pc端的chrome瀏覽器下出現(xiàn)嚴(yán)重的鋸齒

出現(xiàn)以上現(xiàn)象可以對(duì)字體圖標(biāo)的邊緣進(jìn)行模糊；（只支持webkit內(nèi)核瀏覽器,參數(shù)數(shù)值不宜設(shè)置得很大，這會(huì)帶來(lái)圖標(biāo)加粗的問(wèn)題）

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

三.總結(jié)

Sprites利用減少http請(qǐng)求，減少流量；Icon Font利用其對(duì)圖標(biāo)的操作靈敏性，兩者結(jié)合使用，可以達(dá)到很好的效果。

為什么要將icon做成字體？

在很多網(wǎng)站項(xiàng)目中，我們常常會(huì)用到各種透明小圖標(biāo)，然后網(wǎng)站要兼容各個(gè)瀏覽器，也可能會(huì)有多個(gè)尺寸，甚至還要考慮換膚等需求。那么我們就要將這些小圖標(biāo)輸出為多種尺寸、顏色和文件格式，比如png8 alpha透明或者png8 index透明等。

比如，twitter用到的各種小icon：

這種情況下，使用字體來(lái)實(shí)現(xiàn)圖標(biāo)就有很多優(yōu)勢(shì)：

字體文件小，一般20-50kb；容易編輯和維護(hù)，尺寸和顏色可以用css來(lái)控制；透明完全兼容IE6；如何將icon變成字體？

最關(guān)鍵的是要將設(shè)計(jì)稿中的icon(要有矢量路徑，位圖沒(méi)法轉(zhuǎn)化)完美還原成字體，這并不是很麻煩。

我們要用到一些字體編輯軟件，比如FontCreator、FontLab等，這里我們用FontLab來(lái)演示。

還原步驟很簡(jiǎn)單：

PSD–>eps–>FontLab，即將PSD轉(zhuǎn)換為illustrator的eps格式，然后將某個(gè)字符復(fù)制到FontLab中即可。

具體步驟：

打開(kāi)設(shè)計(jì)稿psd，將其保存為Photoshop eps格式，我們這里以Qzone中說(shuō)說(shuō)發(fā)表框的表情icon為例：

在illustrator中打開(kāi)保存的eps文件：

取消分組，然后點(diǎn)選某個(gè)icon，復(fù)制。

打開(kāi)FontLab，隨便打開(kāi)一款字體文件，比如tahoma.ttf：

然后雙擊某個(gè)字符，將原有圖形刪除，粘貼剛才復(fù)制的icon對(duì)象：

調(diào)整圖形大小，一個(gè)icon就完成還原了。

就是這么簡(jiǎn)單。所有icon還原完之后，生成字體文件就可以了。

查看字體對(duì)應(yīng)字符，可以在字體列表中，在某個(gè)字體上右鍵查看屬性(快捷鍵Alt+Enter)，查看該字體對(duì)應(yīng)的字符：

可以看到字體對(duì)應(yīng)的字符是i，unicode編碼是0069。

字體格式的瀏覽器支持：

目前，各個(gè)瀏覽器對(duì)字體格式的支持是最大的區(qū)別：

webkit/safari：支持TrueType/OpenType(.ttf)，OpenType PS(.otf)，iOS4.2+支持.ttf，iOS 4.2以下只支持SVG字體； Chrome：除webkit支持的以外，從Chrome 6開(kāi)始，開(kāi)始支持woff格式； Firefox：支持.ttf和.otf，從Firefox 3.6開(kāi)始支持woff格式； Opera：支持.ttf、.otf、.svg。尚不支持woff Opera 11開(kāi)始支持WOFF(多謝Apostle提醒~~)； IE：只支持eot格式，IE9開(kāi)始支持woff。

注：以上資料來(lái)自于：webfonts.info

注：woff是最新的web開(kāi)放字體格式(web open font format)，w3c推薦，主要優(yōu)勢(shì)是針對(duì)瀏覽器進(jìn)行優(yōu)化，字體文件小。詳情可查看wiki：

在CSS中使用icon字體：

先使用font-face聲明字體：

復(fù)制代碼

代碼如下:

@font-face {
font-family: 'emotion';
src: url('emotion.eot'); /* IE9*/
src: url('emotion.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('emotion.woff') format('woff'), /* chrome、firefox */
url('emotion.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('emotion.svg#svgFontName') format('svg'); /* iOS 4.1- */
}

然后，在icon元素上使用該字體就好了：

復(fù)制代碼

代碼如下:

.icon{font-family:"emotion" Tahoma;
...
}

最后，在頁(yè)面中使用這個(gè)字體：

復(fù)制代碼

代碼如下:

支持CSS3的瀏覽器可以更上流一點(diǎn)兒，我們每次修改html可能沒(méi)那么方便，如果要改變某個(gè)icon，則可能需要修改相關(guān)字符，比如將i修改為e等。如果使用css3的偽元素，可以方便很多：

復(fù)制代碼

代碼如下:

.icon{
display:inline-block;
width:16px;
height:16px;/*占個(gè)位**/
...
}
.icon:after,.icon::after{
font-family:"emotion" Tahoma;
display:inline-block;
content:"i";/*在這里調(diào)用字符*/
width:16px;
height:16px;
margin-left:-16px;/*position:absolute什么的也可以，看具體情況*/
}

嗯，就是用實(shí)際元素占位，用偽元素+content屬性顯示icon，然后覆蓋到實(shí)際元素上面，之后我們修改某個(gè)icon只需要更改css樣式就可以了。

IE依然棘手：
因?yàn)镮E9以前只支持eot格式，所以需要將ttf轉(zhuǎn)換為eot先，這里可以使用微軟官方的WEFT軟件，也可以使用一些在線(xiàn)工具：
http://www.kirsle.net/wizards/ttf2eot.cgi 在線(xiàn)轉(zhuǎn)ttf為eot格式；
http://www.fontsquirrel.com/fontface/generator強(qiáng)大的在線(xiàn)轉(zhuǎn)ttf為eot、woff等字體格式
另外，eot文件必須添加域名白名單才可以使用，這里推薦使用CreateMyEOT：

總結(jié)：
其實(shí)，這種方法有一個(gè)不足，就是只支持純色icon，最多能高端瀏覽器上實(shí)現(xiàn)漸變色或圖形蒙板。
當(dāng)然，我們有很多場(chǎng)景是用純色icon，特別是在Windows 8這種Metro UI開(kāi)始越來(lái)越多的時(shí)候。
另外，這種方法可以有效減少頁(yè)面的請(qǐng)求，但是對(duì)于習(xí)慣使用CSSGaGa的auto sprite功能的同學(xué)來(lái)說(shuō)，這種方法對(duì)頁(yè)面性能的提升不大。
但是對(duì)于移動(dòng)終端，特別是webapp中，這種方法還是有很大的用武之地的，可以很方便的兼容多分辨率，配合離線(xiàn)存儲(chǔ)效果更佳。
如果你有這方面更好的建議和意見(jiàn)，歡迎提出。

如對(duì)本文有疑問(wèn)，請(qǐng)?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會(huì)為你解答?。?點(diǎn)擊進(jìn)入論壇

您可能感興趣的文章:

發(fā)表評(píng)論 (417人查看，0條評(píng)論): 請(qǐng)自覺(jué)遵守互聯(lián)網(wǎng)相關(guān)的政策法規(guī)，嚴(yán)禁發(fā)布色情、暴力、反動(dòng)的言論。

昵稱(chēng)：

最新評(píng)論

------分隔線(xiàn)----------------------------

上一篇：前端ps網(wǎng)頁(yè)切圖的方法
下一篇：Rewrite規(guī)則偽靜態(tài)的配置和常見(jiàn)正則表達(dá)式

大家感興趣的內(nèi)容

最近更新的內(nèi)容

9
什么是ipc

五月综合缴情婷婷六月,色94色欧美sute亚洲线路二,日韩制服国产精品一区,色噜噜一区二区三区,香港三级午夜理伦三级三

CSS Sprites+CSS3 Icon Font圖標(biāo)使用方法

一.CSS Sprites

1.制作CSS Sprites圖片：

1）.制圖工具

2).制圖的思想

1）. 小圖片整合時(shí)，按照從上到下的順序，而不要從左到右排列。

2）. 小圖片整合時(shí)盡量靠最左邊戒者最右邊。

3）. 不建議在不同小圖片上下留間隔。

4）.圖片對(duì)等合并

5）. 把圖片中顏色較近戒相同的組合在一起可以降低顏色數(shù)

6）.在Sprites中把圖片放在它要顯示的地方的相對(duì)的位置

7）. background-position定位時(shí)避免使用 bottom 或 right 等

8）.圖片優(yōu)化：將圖片轉(zhuǎn)成 png8 格式

2.使用CSS Sprites

1）Sprites文件

2）實(shí)現(xiàn)代碼：

3.CSS Sprites使用分析

1）網(wǎng)易163郵箱登陸

2）淘寶

二.CSS3 Icon Font

1.什么是Icon Font

2.Icon Font能干什么

3.Icon Font的優(yōu)點(diǎn)

4.制作Icon Font

5.如何使用（依據(jù)Iconfont）

6.pc端應(yīng)用常見(jiàn)問(wèn)題(Iconfont)

三.總結(jié)

您可能感興趣的文章:

公司信息

快速入口

其它欄目

業(yè)務(wù)咨詢(xún)

五月综合缴情婷婷六月,色94色欧美sute亚洲线路二,日韩制服国产精品一区,色噜噜一区二区三区,香港三级午夜理伦三级三

CSS Sprites+CSS3 Icon Font圖標(biāo)使用方法

一.CSS Sprites

1.制作CSS Sprites圖片：

1）.制圖工具

2).制圖的思想

1）. 小圖片整合時(shí)，按照從上到下的順序，而不要從左到右排列。

2）. 小圖片整合時(shí)盡量靠最左邊戒者最右邊。

3）. 不建議在不同小圖片上下留間隔。

4）.圖片對(duì)等合并

5）. 把圖片中顏色較近戒相同的組合在一起可以降低顏色數(shù)

6）.在Sprites中把圖片放在它要顯示的地方的相對(duì)的位置

7）. background-position定位時(shí)避免使用 bottom 或 right 等

8）.圖片優(yōu)化：將圖片轉(zhuǎn)成 png8 格式

2.使用CSS Sprites

1）Sprites文件

2）實(shí)現(xiàn)代碼：

3.CSS Sprites使用分析

1）網(wǎng)易163郵箱登陸

2）淘寶

二.CSS3 Icon Font

1.什么是Icon Font

2.Icon Font能干什么

3.Icon Font的優(yōu)點(diǎn)

4.制作Icon Font

5.如何使用（依據(jù)Iconfont）

6.pc端應(yīng)用常見(jiàn)問(wèn)題(Iconfont)

三.總結(jié)

您可能感興趣的文章:

公司信息

快速入口

其它欄目

業(yè)務(wù)咨詢(xún)

1）. 小圖片整合時(shí)，按照從上到下的順序，而不要從左到右排列。

3）. 不建議在不同小圖片上下留間隔。