DIV CSS 佈局教程網

@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的設置，鏈接字體文件，像鏈接一張圖片一樣。

1. @font-face {
2. font-family: DeliciousRoman;
3. src: url(/Delicious-Roman.otf);
4. }

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

1. h1 {
2. font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
3. }

上面這個例子還使用了後備字體選項，防止@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%的用戶，我們需要參考以下的文件格式：

• IE所有版本：EOT
• Safari (3.2 ): TTF / OTF
• iPhone (3.1) SVG
• Chrome (all versions): SVG (TTF/OTF 添加於20101月25日)
• Firefox (3.5 ): TTF/OTF (.WOFF 添加於 3.6 版本)
• Opera (10 ) TTF/OTF

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