包含photoshop字體安裝的詞條

網(wǎng)上的一些小圖標除了可以使用css精靈圖制作外，還可以使用現在比較熱門(mén)的iconfont去制作。

那么首先搞清楚一個(gè)問(wèn)題，什么是iconfont？

icon font顧名思義，可以理解成icon + font即 圖標字體。圖標字體，可以理解為是一種特殊的字體，網(wǎng)頁(yè)中的一些小圖標和特殊字符可以通過(guò)這種方法實(shí)現。簡(jiǎn)單來(lái)說(shuō)就是把圖片當成文字來(lái)使用。

既然iconfont是字體文件，那么字體擁有的好處iconfont也是一樣擁有的。使用iconfont來(lái)制作小圖標的好處有哪些呢？

1 網(wǎng)頁(yè)中的文字是矢量，那么iconfont 當然也是矢量的，放大不失真。

2 可以通過(guò)文字控制css屬性去修改圖標的大小 顏色 等等，便于后期修改和維護。

* 兼容ie* 以上的瀏覽器。（需要引入* 個(gè)字體文件，案例會(huì )詳細說(shuō)）

* 體積比圖片小，提高網(wǎng)頁(yè)瀏覽速度。

那么下面通過(guò)吉印通 首頁(yè)的菜單欄來(lái)學(xué)習一下iconfont的使用

下圖為吉印通 首頁(yè)菜單欄截圖：

ps:附件為案例源文件和字體圖標文件素材

左邊的小圖標和右邊的小箭頭是通過(guò)iconfont字體圖標來(lái)制作的,那么先來(lái)分析一下結構怎么搭建

首先整體可以認為是div標簽，上面主題市場(chǎng)，可以給h* 標簽，主題市場(chǎng)右邊的圖標，也是使用iconfont來(lái)制作，iconfont既然是文字，那么我們可以先給一個(gè)i標簽來(lái)存放里面的文字，主題市場(chǎng) 和 右邊圖標字體一個(gè)是左浮 一個(gè)右浮，那么我們先給2個(gè)class分別是left和right去控制浮動(dòng)。注意這一步存放圖標字體的i標簽我們使用iconfont這個(gè)class，后面需要用到這個(gè)class去控制文字圖標的樣式。

結構如下：

菜單里面每一項可以使用ulli結構，每一個(gè)分類(lèi)我們可以認為是一個(gè)li標簽，很明顯左邊的圖標字體和項目分類(lèi)是靠左的，那么我們也需要給一個(gè)類(lèi)去控制左浮，右邊的的箭頭也是使用圖標字體右浮，圖標字體我們統一先加一個(gè)類(lèi)iconfont去控制，結構如下：

/ /

………………………………………………

結構搭建完就來(lái)書(shū)寫(xiě)整體的樣式：

首先清空默認樣式和書(shū)寫(xiě)整體文字和超鏈接樣式

（這里清空先用*,真正做項目的時(shí)候不建議使用，因為選中所有標簽效率較低）

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

body{font-size: 12px; font-family:"宋體";}

a{color:#FFF7F* ; text-decoration: none;}

a:hover{color:#fff; text-decoration:underline;}

其次書(shū)寫(xiě)菜單欄整體布局樣式：

（li元素在ie7高度會(huì )存在偏高的問(wèn)題，可以通過(guò)寫(xiě)css hack去解決*vertical-align:middle;）

/*案例基本結構樣式*/

.menu{width: 1* 7px; height: * 20px; background:#FF* * * 7; margin:100px auto; color:#FFEAE* ; font-weight: bold; padding:0 * px;}

.menu h* {height: * * px; line-height: * * px; font-size: 1* px; overflow:hidden;}

.menu h* a:hover{text-decoration: none;}

.menu ul li{ height:* 0px; line-height: * 0px; overflow: hidden; *vertical-align:middle;/*處理ie7 li元素高度變長(cháng)問(wèn)題*/}

.menu .left{float: left;}

.menu .right{float: right;}

整體結構搭建完來(lái)思考一個(gè)問(wèn)題，怎么把iconfont字體圖標嵌入到網(wǎng)頁(yè)中呢？

計算機中的特殊字體，例如一些設計的字體是下載好然后安裝在計算機里面，那么同樣道理，iconfont也一樣，也是通過(guò)把需要的圖標字體下載下來(lái)或者獲取在線(xiàn)的連接，再嵌入到網(wǎng)頁(yè)中的，那么這個(gè)案例我們通過(guò)下載下來(lái)嵌入到網(wǎng)頁(yè)里面

現在推薦一個(gè)網(wǎng)站：阿* 矢量圖標庫，里面有大量的矢量圖標，網(wǎng)上常見(jiàn)的圖標在里面基本都可以找到，而且支持diy

圖標庫截圖：

這個(gè)網(wǎng)站包括大量網(wǎng)上常見(jiàn)的圖標，做項目的時(shí)候可以通過(guò)搜索需要的圖標添加到項目

右上角支持搜索，把需要的圖標找到后建議統一添加到項目，方便后期修改和維護

搜索找到我們需要的圖標添加到項目（案例只找了類(lèi)似的圖標，沒(méi)有和吉印通 線(xiàn)上的一模一樣）：

通過(guò) 圖標管理/圖標應用項目 可以找到我們添加好圖標的項目

下圖是項目的一些圖標截圖：

找到需要的圖標后，就可以開(kāi)始進(jìn)入下一步，剛剛已經(jīng)提過(guò)我們是需要把字體文件下載下來(lái)，那么這里我們點(diǎn)擊 下載至本地

下載下來(lái)后是一個(gè)壓縮文件，解壓之后我們可以看到幾個(gè)文件：

可以看到解壓后的文件有一個(gè)demo.html文件，圖標字體怎么嵌入網(wǎng)頁(yè)，需要參考這個(gè)文件，另外還有* 個(gè)字體文件，iconfont這個(gè)網(wǎng)站為了兼容不同瀏覽器，提供了* 個(gè)不同格式的字體文件，這* 個(gè)字體文件都需要引入到網(wǎng)頁(yè)中，才能兼容不同的瀏覽器

接著(zhù)打開(kāi)demo文件，參考里面的方法，把字體圖標嵌入到網(wǎng)頁(yè)中

demo文件打開(kāi)后，首先看到不同圖標對應不同的編碼（下面是demo截圖的一部分）：

還有詳細的把iconfont嵌入網(wǎng)頁(yè)的步驟：

第一步：使用font-face聲明字體(下面這些都是css代碼)

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

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

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

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

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

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

}

這里使用了@font-face這個(gè)css規則聲明了字體font-family定義為iconfont，然后通過(guò)src把剛剛的四個(gè)兼容不同瀏覽器的字體文件引入到網(wǎng)頁(yè)中，可以看到ie* 以上的瀏覽器都支持iconfont字體圖標。

這一步需要注意的幾個(gè)問(wèn)題：

1 聲明字體 font-family: 'iconfont';

font-family字體名字iconfont可以自定義，支持修改，但是修改的話(huà)后面所有關(guān)于iconfont控制的class都需要修改，為了避免出現問(wèn)題，此步驟統一不修改

2 src引入字體文件的路徑，是在css 文件同一個(gè)根目錄下的，所有這里一定要把四個(gè)字體文件復制到css文件同一個(gè)根目錄下頁(yè)面才能正確的找到需要的字體文件

* 聲明字體和引入文件代碼量比較多，這里完全不需要記憶，直接把代碼復制到網(wǎng)頁(yè)的css 里面就可以了

第二步： 把字體文件通過(guò)src引入到網(wǎng)頁(yè)之后，就可以定義它的樣式并使用了

.iconfont{

font-family:"iconfont" !important;

font-size:1* px;font-style:normal;

-webkit-font-smoothing: antialiased;

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

-moz-osx-font-smoothing: grayscale;}

此步驟也是直接把代碼復制到css里面即可，這里是定義了iconfont的字體、字體圖標的大小和處理了一些不同瀏覽器的兼容問(wèn)題。

第三步： 不同圖標對應不同的編碼，最后一步就是挑選對應圖標的編碼，嵌入html文檔中即可（注意這里是把字體編碼放在之前準備好的帶有iconfont這個(gè)class的標簽里面）

代碼

#x* * ;

添加好對應圖標編碼的案例結構（后面代碼量太多省略，以前面兩項為例）：

a href="#"class="left"主題市場(chǎng)

#xe* 11;

#xe* 00;

女裝 / 男裝 / 內衣

#xe* 0f;

#xe* 01;

鞋靴 / 箱包 / 配件

#xe* 0f;

……………………………………

那么css代碼如下：

（聲明和定義樣式直接復制即可，再根據實(shí)際需要具體修改字體圖標樣式）