您現在的位置: 365建站網 > 365學習 > CSS Sprites+CSS3 Icon Font圖標使用方法

CSS Sprites+CSS3 Icon Font圖標使用方法

文章來源:365jz.com     點擊數:258    更新時間:2018-07-29 11:51   參與評論

      CSS Sprites在國內很多人叫CSS精靈,是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去,這樣一來,當訪問該頁面時,載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。根據具體圖標在大圖上的位置,給背景定位。

      CSS Sprites加速的關鍵,不是降低質量,而是減少個數。

      做成Sprites的很大的原因是圖片流量大,想象一下,如果將一些小圖片做成字體模式進行顯示,會不會很神奇呢?隨著CSS3對字體樣式的不斷豐富,即便在中文網頁中對font-face賦于了新的應用場景,那就是用Icon Font代替頁面中的圖片?,F在通常所指的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.hugecrab.com/article/24507

      還有一些制作Sprites圖片的網站,如:http://css.spritegen.com/。直接上傳需要組合的圖片,自動組合,并生成代碼;但不能根據自己的需要更改圖片的位置。

2).制圖的思想

CSS Sprites 技術要點總結:

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

這樣排列 background-position 的值一目了然,寫 css 時方便許多。同時也是為了后期維護著想。想象一下,如果后期維護時,修改其中某個圖片的尺寸,那么周圍的所有元素的background-position 就會隨之改變,這將會是一件很頭疼的事情。

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

這兩個位置很靈活,非常適合擺放文本前的 icon,再寫樣式時不會受到其它 CSS Sprites 圖片干預。綜合第 1 點,我們可以沿著最左邊和最右邊的兩側開始由上至下整合圖片。

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

因為這樣會導致圖片 size 增大從而增加文件的大小。當然,也要給每個圖片足夠的空間,因為使用這些圖片的元素通常都會有大量的內容而且可能會需要擴展的間距,以至于其它圖片不會意外出現。

4).圖片對等合并

應用CSS Sprites圖片時,適當地把對等相同的圖像合并,以節省空間及減少體積。

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

少色數的圖片文件體積會相對的小。

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

如果我們希望一個圖片出現在一個元素的左側,將那個圖片放到 sprite 圖片的右邊,如圖 
image

這樣的話,當你通過CSS 移勱背景圖片的位置的時候,基本不會有其它的圖片出現在它的附近。

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

使用像素的位置來,當增加或變更圖片元素時不用修改。

8).圖片優化:將圖片轉成 png8 格式

圖片體積及尺寸方面,建議體積保持在100K以內,size為800px(最佳尺寸)。

2.使用CSS Sprites

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

使用CSS Sprites建立demo示例,效果如下:

image

 

1)Sprites文件

slice

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="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: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使用分析
1)網易163郵箱登陸

163

163的Sprites文件

clipboard[4]

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

clipboard[8]

看出taobao的登陸沒用CSS精靈,而是用在如上顯示的欄目中,此處不再解釋taobao使用Sprites。我們看一下taobao的登陸:

taobao[14]

登陸的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首頁的如下區域:

image

看到登陸中的人頭了嗎?看到綠色區域里的圖標了嗎?他們實際是使用的是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>

話費的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能干什么

image

image

image

image

image

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 正?;?nbsp;*//** 重置列表元素 **/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;
}

復制代碼

效果如下:

IconFont

6.pc端應用常見問題(Iconfont)

1)字體圖標在safair或chrome瀏覽器下被加粗

image

以上現象是由于字體圖標存在半個像素的鋸齒,在瀏覽器渲染的時候直接顯示一個像素了,導致在有背景下的圖標顯示感覺加粗;所以在應用字體圖標的時候需要對圖標樣式進行抗鋸齒處理,CSS代碼設置如下:

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

2)字體圖標在IE7瀏覽器顯示中圖標右側出現小方框現象

image

出現以上現象可以對引用字體圖標的非塊標簽進行以下CSS定義:

display: block;

3)字體圖標在pc端的chrome瀏覽器下出現嚴重的鋸齒

image

出現以上現象可以對字體圖標的邊緣進行模糊;(只支持webkit內核瀏覽器,參數數值不宜設置得很大,這會帶來圖標加粗的問題)

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

三.總結

Sprites利用減少http請求,減少流量;Icon Font利用其對圖標的操作靈敏性,兩者結合使用,可以達到很好的效果。


為什么要將icon做成字體?

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

比如,twitter用到的各種小icon:

這種情況下,使用字體來實現圖標就有很多優勢:

字體文件小,一般20-50kb; 容易編輯和維護,尺寸和顏色可以用css來控制; 透明完全兼容IE6; 如何將icon變成字體?

最關鍵的是要將設計稿中的icon(要有矢量路徑,位圖沒法轉化)完美還原成字體,這并不是很麻煩。

我們要用到一些字體編輯軟件,比如FontCreator、FontLab等,這里我們用FontLab來演示。

還原步驟很簡單:

PSD–>eps–>FontLab,即將PSD轉換為illustrator的eps格式,然后將某個字符復制到FontLab中即可。

具體步驟:

打開設計稿psd,將其保存為Photoshop eps格式,我們這里以Qzone中說說發表框的表情icon為例:

在illustrator中打開保存的eps文件:

取消分組,然后點選某個icon,復制。

打開FontLab,隨便打開一款字體文件,比如tahoma.ttf:

然后雙擊某個字符,將原有圖形刪除,粘貼剛才復制的icon對象:

調整圖形大小,一個icon就完成還原了。

就是這么簡單。所有icon還原完之后,生成字體文件就可以了。

查看字體對應字符,可以在字體列表中,在某個字體上右鍵查看屬性(快捷鍵Alt+Enter),查看該字體對應的字符:

可以看到字體對應的字符是i,unicode編碼是0069。

字體格式的瀏覽器支持:

目前,各個瀏覽器對字體格式的支持是最大的區別:

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

注:以上資料來自于:webfonts.info

注:woff是最新的web開放字體格式(web open font format),w3c推薦,主要優勢是針對瀏覽器進行優化,字體文件小。詳情可查看wiki:

在CSS中使用icon字體:

先使用font-face聲明字體:

復制代碼

代碼如下:


@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元素上使用該字體就好了: 

復制代碼

代碼如下:


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


最后,在頁面中使用這個字體: 

復制代碼

代碼如下:


<span class="icon">i</span


支持CSS3的瀏覽器可以更上流一點兒,我們每次修改html可能沒那么方便,如果要改變某個icon,則可能需要修改相關字符,比如將i修改為e等。如果使用css3的偽元素,可以方便很多: 

復制代碼

代碼如下:


.icon{ 
display:inline-block; 
width:16px; 
height:16px;/*占個位**/ 
... 

.icon:after,.icon::after{ 
font-family:"emotion" Tahoma; 
display:inline-block; 
content:"i";/*在這里調用字符*/ 
width:16px; 
height:16px; 
margin-left:-16px;/*position:absolute什么的也可以,看具體情況*/ 


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

IE依然棘手: 
因為IE9以前只支持eot格式,所以需要將ttf轉換為eot先,這里可以使用微軟官方的WEFT軟件,也可以使用一些在線工具: 
http://www.kirsle.net/wizards/ttf2eot.cgi 在線轉ttf為eot格式; 
http://www.fontsquirrel.com/fontface/generator強大的在線轉ttf為eot、woff等字體格式 
另外,eot文件必須添加域名白名單才可以使用,這里推薦使用CreateMyEOT: 


總結: 
其實,這種方法有一個不足,就是只支持純色icon,最多能高端瀏覽器上實現漸變色或圖形蒙板。 
當然,我們有很多場景是用純色icon,特別是在Windows 8這種Metro UI開始越來越多的時候。 
另外,這種方法可以有效減少頁面的請求,但是對于習慣使用CSSGaGa的auto sprite功能的同學來說,這種方法對頁面性能的提升不大。 
但是對于移動終端,特別是webapp中,這種方法還是有很大的用武之地的,可以很方便的兼容多分辨率,配合離線存儲效果更佳。 
如果你有這方面更好的建議和意見,歡迎提出。


如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (258人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 亚洲伊人成综合网2222| chinese丰满美女video| 本道久久综合无码中文字幕| china20岁高中生gay在线| 秋霞2019理论2018年成片757| 男女xo嘿咻嘿咻动态图| 人人弄狠狠婷五月丁香| 人妻慢慢放弃抵抗开始迎合| 777亚洲人成视频免费视频| 日日摸夜夜添夜夜添破第一次| 国产综合色在线精品| 成本人片无码中文字幕直播| caoprom最新超碰地址| 中文字幕换人妻好紧| 99久久国产精品免费| 男人的天堂av| vldeosgratis欧美另类| 日本三级香港三级乳网址| ...国产人成视频在线视频| 黑巨茎大战俄罗斯白人美女| 能看到让你流水的小说| a亚洲影视在线观看| 从后面抱住岳大屁股撞击| g片男a同志y免费网站| 日本高清视频中文无码| 国产纶乱视频| 中国孕妇xxxxxxxxx孕交| 免费无码中文a级毛片| 山东熟女啪啪哦哦叫| 日本三级香港三级人妇99| 毛1卡2卡3卡4卡在线观看| http://www.healthcoachjillparkernj.com