在網(wǎng)頁(yè)中，我們可以用CSS的font-family屬性來(lái)定義字體，然而定義的字體在用戶的電腦上能否正確呈現(xiàn)則要看用戶的電腦是否安裝了該字體。我們經(jīng)常能看到國(guó)外的一些個(gè)人網(wǎng)站使用了非常漂亮的字體，而這些字體通常在用戶的電腦中是沒(méi)有安裝的，所以用font-family屬性就無(wú)法實(shí)現(xiàn)了，今天我們就介紹使用@font-face實(shí)現(xiàn)個(gè)性化字體。

CSS3 @font-face

　　說(shuō)@font-face是CSS3的新特性并不準(zhǔn)確，因?yàn)镃SS2就已經(jīng)支持了這一特性，并且Internet Explorer早在第5版的時(shí)候就已經(jīng)支持它了，不過(guò)IE實(shí)現(xiàn)方式是通過(guò)自有的eot(Embeded Open Type)字體格式，其它瀏覽器都不支持這個(gè)格式。@font-face支持如下屬性：

　　font-family：設(shè)置文本的字體名稱。

　　font-style：設(shè)置文本樣式。

　　font-variant：設(shè)置文本是否大小寫。

　　font-weight：設(shè)置文本的粗細(xì)。

　　font-stretch：設(shè)置文本是否橫向的拉伸變形。

　　font-size：設(shè)置文本字體大小。

　　src：設(shè)置自定義字體的相對(duì)路徑或者絕對(duì)路徑。

　　@font-face瀏覽器兼容性如下：

4+

3.5+

4+

3.1+

10+

一個(gè)簡(jiǎn)單例子

　　先聲明一個(gè)名為ChantelliAntiquaRegular的字體，有一種老的寫法是這樣的：

@font-face {
	font-family: "ChantelliAntiquaRegular";
	src: url("Chantelli_Antiqua-webfont.eot");
	src: local("?"), url("Chantelli_Antiqua-webfont.woff") format("woff"), url("Chantelli_Antiqua-webfont.ttf") format("truetype"), url("Chantelli_Antiqua-webfont.svg#webfontZjhIjbDc") format("svg");
	font-weight: normal;
	font-style: normal;
}

　　第一個(gè)src是兼容IE，第二個(gè)src是兼容其它瀏覽器。local("?")是一種hack寫法，避免從客戶端加載字體，這種寫法在Android系統(tǒng)中有BUG，感興趣的同學(xué)可見(jiàn)《Best Practice For @Font-Face CSS Takes A Turn》，改進(jìn)方案是聲明兩個(gè)@font-face，如下：

@font-face {
	font-family: "ChantelliAntiquaRegular";
	src: url("Chantelli_Antiqua-webfont.eot");
}

@font-face {
	font-family: "ChantelliAntiquaRegular";
	src: url(//:) format("no404"), url("Chantelli_Antiqua-webfont.woff") format("woff"), url("Chantelli_Antiqua-webfont.ttf") format("truetype"), url("Chantelli_Antiqua-webfont.svg#webfontMFqI76bT") format("svg");
	font-weight: normal;
	font-style: normal;
}

　　我們首先聲明一個(gè)引用eot字體文件的@font-face，以確保它在IE中能正常工作，第二個(gè)@font-face引用了多個(gè)字體格式是為了兼容其它瀏覽器，它們將按順序查找，直到找到支持的格式，這意味著同一個(gè)字體需要有多個(gè)格式。url(//:) format("no404")是一種Bulletproof寫法，感興趣的同學(xué)可見(jiàn)《New @Font-Face Syntax: Simpler, Easier》一文。

　　其它的HTML和CSS代碼如下：

.font-face-display {
	font: 66px ChantelliAntiquaRegular, Helvetica, sans-serif;
}

<div class="font-face-display">Take me to your heart</div>

　　最重效果如下：

免費(fèi)字體網(wǎng)站Font Squirrel

　　Font Squirrel是一個(gè)非常優(yōu)秀的免費(fèi)字體資源網(wǎng)站，收集了很多高品質(zhì)字體供網(wǎng)頁(yè)設(shè)計(jì)者免費(fèi)下載，還有個(gè)字體格式生成工具@font-face generator，上傳一個(gè)字體文件，可以生成多種字體格式及CSS代碼，非常有用。如果你需要一些優(yōu)秀的免費(fèi)英文字體，這是個(gè)好去處。

　　想要豐富多彩的頁(yè)面就需要有更多的字體樣式，人們想出了很多字體替代方案，除了@font-face方案外還有sIFR、Cufon、Typeface.js等，還有.webfont，簡(jiǎn)單說(shuō)，.webfont 就是在字體中嵌入了訪問(wèn)許可表，瀏覽器可以讀出這些許可信息，并決定是否應(yīng)該下載和渲染這些字體。另外還有Typekit也是一種值得關(guān)注的方案，將字體放在第三方服務(wù)器上供調(diào)用。這些方案的優(yōu)缺點(diǎn)，將會(huì)在以后做詳細(xì)的介紹。

相關(guān)文章：

　　1.關(guān)于 Web 字體：現(xiàn)狀與未來(lái)

　　2.Web字體格式介紹及瀏覽器兼容性一覽

　　3.Using CSS3 and @font-face to use any custom font on a web site