CSS Sprites+CSS3 Icon Font

時間 2019-11-10

標籤 css sprites+css3 sprites icon font 欄目 CSS 简体版

原文原文鏈接

CSS Sprites+CSS3 Icon Font

先立刻等有空必定看看轉載於http://www.cnblogs.com/jingwhale/p/4280073.htmlcss

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

CSS Sprites加速的關鍵，不是下降質量，而是減小個數。css3

作成Sprites的很大的緣由是圖片流量大，想象一下，若是將一些小圖片作成字體模式進行顯示，會不會很神奇呢？隨着CSS3對字體樣式的不斷豐富，即使在中文網頁中對font-face賦於了新的應用場景，那就是用Icon Font代替頁面中的圖片。如今一般所指的Icon Font，是用字體文件取代圖片文件，來展現圖標、特殊字體等元素的方法。git

使用字體來實現圖標就有不少優點：字體文件小，通常20-50kb；矢量性，在不一樣的分辨率屏幕上適配縮放不失真；容易編輯和維護，尺寸和顏色能夠用css來控制，能夠添加一些視覺效果如：陰影、旋轉、透明度；透明徹底兼容IE6；還不用爲sprite icon中的inline-block的兼容性煩惱等等。github

因爲是字體，因此只支持圖片上是純色的，多種顏色的就不支持了；並且不少圖片的效果Icon Font很難很好的實現，因此將兩者結合是如今不少公司的作法，如：APPLE、淘寶等。web

一.CSS Sprites

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position能夠用數字精確的定位出背景圖片的位置。chrome

1.製做CSS Sprites圖片：

1）.製圖工具

專業製圖包括Photoshop、fireworks等。如何從設計稿切圖，請看另外一篇博文http://www.cnblogs.com/jingwhale/p/4396235.html瀏覽器

還有一些製做Sprites圖片的網站，如：http://css.spritegen.com/。直接上傳須要組合的圖片，自動組合，並生成代碼；但不能根據本身的須要更改圖片的位置。安全

2).製圖的思想

CSS Sprites 技術要點總結：jsp

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

這樣排列 background-position 的值一目瞭然，寫 css 時方便許多。同時也是爲了後期維護着想。想象一下，若是後期維護時，修改其中某個圖片的尺寸，那麼周圍的全部元素的background-position 就會隨之改變，這將會是一件很頭疼的事情。

2）. 小圖片整合時儘可能靠最左邊戒者最右邊。

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

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

由於這樣會致使圖片 size 增大從而增長文件的大小。固然，也要給每一個圖片足夠的空間，由於使用這些圖片的元素一般都會有大量的內容並且可能會須要擴展的間距，以致於其它圖片不會意外出現。

4）.圖片對等合併

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

5）. 把圖片中顏色較近戒相同的組合在一塊兒能夠下降顏色數

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

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

若是咱們但願一個圖片出如今一個元素的左側，將那個圖片放到 sprite 圖片的右邊，如圖

這樣的話，當你經過CSS 移勱背景圖片的位置的時候，基本不會有其它的圖片出如今它的附近。

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

使用像素的位置來，當增長或變動圖片元素時不用修改。

8）.圖片優化：將圖片轉成 png8 格式

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

2.使用CSS Sprites

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

使用CSS Sprites創建demo示例，效果以下：

1）Sprites文件

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的Sprites文件

登錄的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利用其對圖標的操做靈敏性，二者結合使用，能夠達到很好的效果。

完

轉載需註明轉載字樣，標註原做者和原博文地址。

1. CSS - icon圖標(icon font)
2. Icon Font淺談
3. CSS3 icon font
4. mint-ui font icon
5. icon-font與svg
6. vue font-icon 圖標
7. 阿里巴巴icon font導入CSS
8. icon-font-generator 的使用
9. icon-font圖標介紹
10. CSS3 icon font徹底指南
更多相關文章...
• ionic icon(圖標) - ionic 教程
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• 適用於PHP初學者的學習線路和建議

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。