欧美性猛交xxxx免费看,欧美激情视频一区二区三区免费

QQ 咨詢：361652718 513960520

知識學(xué)堂

·聯(lián)系電話:+86.023-75585550
·聯(lián)系傳真:+86.023-75585550
·24小時手機:13896886023
·QQ 咨詢：361652718 513960520

當(dāng)前位置 > 首頁 > 知識學(xué)堂 > 網(wǎng)站建設(shè)知識

CSS3的自定義字體@font-face:如何將icon變成字

更新時間：2012-06-05 | 發(fā)布人：本站 | 點擊率：961 次

大家都知道現(xiàn)在各個瀏覽器都支持CSS3的自定義字體(@font-face)，包括IE6都支持，只是各自對字體文件格式的支持不太一樣。那么對于網(wǎng)站中用到的各種icon，我們就可以嘗試使用font來實現(xiàn)，本文將詳細講解這種用法。

為什么要將icon做成字體？

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

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

這種情況下，使用字體來實現(xiàn)圖標就有很多優(yōu)勢：

字體文件小，一般20-50kb；
容易編輯和維護，尺寸和顏色可以用css來控制；
透明完全兼容IE6；

如何將icon變成字體？

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

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

還原步驟很簡單：

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

具體步驟：

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

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

取消分組，然后點選某個icon，復(fù)制。

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

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

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

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

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

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

字體格式的瀏覽器支持：

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

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推薦，主要優(yōu)勢是針對瀏覽器進行優(yōu)化，字體文件小。詳情可查看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元素上使用該字體就好了：

1
2
3

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

最后，在頁面中使用這個字體：

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

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

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