@font-face 是CSS中的一個功能，它允許在網頁中顯示指定的字體，即使用戶的電腦中沒有安裝該字體。這就意味著設計師和開發人員可以不用考慮web安全字體，如預裝在用戶電腦中的，Arial、Time New Roman、Verdana 和 Trebuchet等字體。

@font-face的好處：

當前網頁設計流行在網頁中的標題、Logo和題目中使用非網頁安全字體。這就意味著如果我們使用沒有預裝在用戶電腦的字體時，我們必須使用一些方法來解決這個問題，如使用背景圖片來替換。還有其它如cufon網（http://cufon.shoqolate.com/generate/）上提供的方法。使用@font-face，我們可以避免隱藏標題和花費更多時間去做每一張背景圖片，只需要在服務端放置一個字體，節省了時間和帶寬。

使用@font-face

使用@font-face很簡單，你只要簡單地在樣式表中包含@font-face的設置，鏈接字體文件，像鏈接一張圖片一樣。

然后，如果要設置h1中的字體，就像下面的例子：

上面這個例子還使用了后備字體選項，防止@font-face不被支持。

@font-face的兼容性

IE支持@font-face已經有好多年了，而FF(火狐)到3.5版本才支持，是最后一個主流瀏覽器支持@font-face。

根據NetMarketShare最新的統計，我們可以得到最少92%的瀏覽器都支持@font-face。

以我看來，更高安全級別的瀏覽器都將支持@font-face，因為許多非IE用戶和許多非流行web瀏覽器被包括在統計內。許多剩下來的8%用戶應該是移動用戶。IPhone和iPat一樣都支持@font-face。

@font-face文件的格式

為了滿足92%的用戶，我們需要參考以下的文件格式：

所以，.eot .ttf 或者 .otf .svg .woff是最好的兼容組合。