使用CSS3 @font-face實現個人化字型

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

CSS3 @font-face

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

　　font-family：設定文本的字型名稱。

　　font-style：設定文本樣式。

　　font-variant：設定文本是否大小寫。

　　font-weight：設定文本的粗細。

　　font-stretch：設定文本是否橫向的展開變形。

　　font-size：設定文本字型大小。

　　src：設定自訂字型的相對路徑或者絕對路徑。

　　@font-face瀏覽器安全色性如下：

4+

3.5+

4+

3.1+

10+

一個簡單例子

　　先聲明一個名為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;}

　　第一個src是相容IE，第二個src是相容其它瀏覽器。local("")是一種hack寫法，避免從用戶端載入字型，這種寫法在Android系統中有BUG，感興趣的同學可見《Best Practice For @Font-Face CSS Takes A Turn》，改進方案是聲明兩個@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;}

　　我們首先聲明一個引用eot字型檔的@font-face，以確保它在IE中能正常工作，第二個@font-face引用了多個字型格式是為了相容其它瀏覽器，它們將按順序尋找，直到找到支援的格式，這意味著同一個字型需要有多個格式。url(//:) format("no404")是一種Bulletproof寫法，感興趣的同學可見《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>

　　最重效果如下：

　　

免費字型網站Font Squirrel

　　Font Squirrel是一個非常優秀的免費字型資源網站，收集了很多高品質字型供網頁設計者免費下載，還有個字型格式產生工具@font-face generator，上傳一個字型檔，可以產生多種字型格式及CSS代碼，非常有用。如果你需要一些優秀的免費英文字型，這是個好去處。

　　

　　想要豐富多彩的頁面就需要有更多的字型樣式，人們想出了很多字型替代方案，除了@font-face方案外還有sIFR、Cufon、Typeface.js等，還有.webfont，簡單說，.webfont 就是在字型中嵌入了訪問許可表，瀏覽器可以讀出這些許可資訊，並決定是否應該下載和渲染這些字型。另外還有Typekit也是一種值得關注的方案，將字型放在第三方伺服器上供調用。這些方案的優缺點，將會在以後做詳細的介紹。

相關文章：

　　1.關於 Web 字型：現狀與未來

　　2.Web字型格式介紹及瀏覽器安全色性一覽

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