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

CSS3 @font-face

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

　　font-family：設(shè)置文本的字體名稱。
　　font-style：設(shè)置文本樣式。
　　font-variant：設(shè)置文本是否大小寫。
　　font-weight：設(shè)置文本的粗細(xì)。
　　font-stretch：設(shè)置文本是否橫向的拉伸變形。
　　font-size：設(shè)置文本字體大小。
　　src：設(shè)置自定義字體的相對路徑或者絕對路徑。
　　@font-face瀏覽器兼容性如下：
 

一個簡單例子

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

第一個src是兼容IE，第二個src是兼容其它瀏覽器。local("☺")是一種hack寫法，避免從客戶端加載字體，這種寫法在Android系統(tǒng)中有BUG，改進(jìn)方案是聲明兩個@font-face，如下：

我們首先聲明一個引用eot字體文件的@font-face，以確保它在IE中能正常工作，第二個@font-face引用了多個字體格式是為了兼容其它瀏覽器，它們將按順序查找，直到找到支持的格式，這意味著同一個字體需要有多個格式。url(//:) format("no404")是一種Bulletproof寫法。