@font-face是CSS3中的一個模塊，他主要是把自己定義的Web字體嵌入到你的網頁中，隨着@font-face模塊的出現，我們在Web的開發中使用字體不怕只能使用Web安全字體，你們當中或許有許多人會不自然的問，這樣的東西IE能支持嗎？當我告訴大家@font-face這個功能早在IE4就支持了你肯定會感到驚訝。我的Blog就使用了許多這樣的自定義Web字體，比如說首頁的Logo，Tags以及頁面中的手寫英文體，很多朋友問我如何使用，能讓自己的頁面也支持這樣的自定義字體，一句話這些都是@font-face實現的，為了能讓更多的朋友知道如何使用他，今天我主要把自己的一點學習過程貼上來和大家分享。
首先我們一起來看看@font-face的語法規則：
@font-face {
font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>]; }
取值說明
1、YourWebFontName:此值指的就是你自定義的字體名稱，最好是使用你下載的默認字體，他將被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”
2、source:此值指的是你自定義的字體的存放路徑，可以是相對路徑也可以是絕路徑；
3、format：此值指的是你自定義的字體的格式，主要用來幫助瀏覽器識別，其值主要有以下幾種類型：truetype,opentype,truetype-aat,embedded-opentype,avg等；
4、weight和style:這兩個值大家一定很熟悉，weight定義字體是否為粗體，style主要定義字體樣式，如斜體。
兼容瀏覽器
說到瀏覽器對@font-face的兼容問題，這里涉及到一個字體format的問題，因為不同的瀏覽器對字體格式支持是不一致的，這樣大家有必要了解一下，各種版本的瀏覽器支持什么樣的字體，前面也簡單帶到了有關字體的幾種格式，下面我就分別說一下這個問題，讓大家心里有一個概念：
一、TureTpe(.ttf)格式：
.ttf字體是Windows和Mac的最常見的字體，是一種RAW格式，因此他不為網站優化,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；
二、OpenType(.otf)格式：
.otf字體被認為是一種原始的字體格式，其內置在TureType的基礎上，所以也提供了更多的功能,支持這種字體的瀏覽器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；
三、Web Open Font Format(.woff)格式：
.woff字體是Web字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支持元數據包的分離,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；
四、Embedded Open Type(.eot)格式：
.eot字體是IE專用字體，可以從TrueType創建此格式字體,支持這種字體的瀏覽器有【IE4+】；
五、SVG(.svg)格式：
.svg字體是基於SVG字體渲染的一種格式,支持這種字體的瀏覽器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。
這就意味着在@font-face中我們至少需要.woff,.eot兩種格式字體，甚至還需要.svg等字體達到更多種瀏覽版本的支持。
為了使@font-face達到更多的瀏覽器支持，Paul Irish寫了一個獨特的@font-face語法叫Bulletproof @font-face:
@font-face { font-family: 'YourWebFontName'; src: url('YourWebFontName.eot?') format('eot');/*IE*/ src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/ }
但為了讓各多的瀏覽器支持，你也可以寫成：
@font-face { font-family: 'YourWebFontName'; src: url('YourWebFontName.eot'); /* IE9 Compat Modes */ src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('YourWebFontName.woff') format('woff'), /* Modern Browsers */ url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */ url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */ }
說了這么多空洞的理論知識，大家一定有點心癢癢了，那么我們先來看看W3CPLUS首頁中導航部分的蘭色字體是如何實現的，假如我們有一個這樣的DOM標簽，需要應用自定義字體：
HTML Code:
<h2 class="neuesDemo">Neues Bauen Demo</h2>
通過@font-face來定義自己的Web Font:
@font-face { font-family: 'NeuesBauenDemo'; src: url('../fonts/neues_bauen_demo-webfont.eot'); src: url('../fonts/neues_bauen_demo-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/neues_bauen_demo-webfont.woff') format('woff'), url('../fonts/neues_bauen_demo-webfont.ttf') format('truetype'), url('../fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo') format('svg'); font-weight: normal; font-style: normal; }
我在這里采用的是相對路徑，當然大家也可以使用絕路徑。到這里我們就需要把定義好的字體應用到我們實際頁面中去：
h2.neuesDemo { font-family: 'NeuesBauenDemo' }
效果：
看到上面的效果，我想大家會感到@font-face很神奇，同時也想爭着做做看，可是一動手才發現，特殊字體我要怎樣才能得到，那些.eot,.woff,.ttf,.svg這些字體格式又怎么獲取呢？有些朋友可能就不知道如何運手了，那么我們就帶着這些問題來一個全程完成的實例吧：
一、獲取特殊字體：
我們拿下面這種single Malta字體來說吧：
要得到single Malta字體，不外乎兩種途徑，其一找到付費網站購買字體，其二就是到免費網站DownLoad字體。當然要給錢的這種傻事我想大家都不會做的，那我們就得到免費的地方下載，在哪有呢？我平時都是到Google Web Fonts和Dafont.com尋找自己需要的字體，當然網上也還有別的下載字體的地方，這個Demo使用的是Dafont.com的Single Malta字體，這樣就可以到這里下載Single Malta：
Single Malta下載下來后，需要把它解壓縮出來：
二、獲取@font-face所需字體格式：
特殊字體已經在你的電腦中了，現在我們需要想辦法獲得@font-face所需的.eot,.woff,.ttf,.svg字體格式。要獲取這些字體格式，我們同樣是需要第三方工具或者軟件來實現，下面我給大家推薦一款我常用的一個工具fontsquirrel,別的先不多說，首跟我點這里進入到下面這個界面吧。
如果你進入頁面沒有看到上圖，你可以直接點擊導航:
如果你看到了上面的界面，那就好辦了，我們來看如何應用這個工具生成@font-face需要的各種字體，先把我們剛才下載的字體上傳上去：
上傳后按下圖所示操作：
現在從Font Squirrel下載下來的文件已經保存在你本地的電腦上了，接着只要對他進行解壓縮，你就能看到文件列表如下所示：
大家可以看到，解壓縮出來的文件格式，里面除了@font-face所需要的字體格式外，還帶有一個DEMO文件，如果你不清楚的也可以參考下載下來的DEMO文件，我在這里不對DEMO說明問題，我主要是給大家介紹如何把下載下來的文件有價值的運用到我們的項目中。
例如在自己的本地創建了一個fontface項目：
為了讓項目結構更清晰，我們在項目中單獨創建一個fonts目錄，用來放置解壓縮出來@font-face所需的字體格式：
現在@font-face所需字體已經加載到本地項目，現在本地項目中的style.css中附上我們需要的@font-face樣式
@font-face { font-family: 'SingleMaltaRegular'; src: url('../fonts/singlemalta-webfont.eot'); src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/singlemalta-webfont.woff') format('woff'), url('../fonts/singlemalta-webfont.ttf') format('truetype'), url('../fonts/singlemalta-webfont.svg#SingleMaltaRegular') format('svg'); font-weight: normal; font-style: normal; }
到這里為止，我們已經通過@font-face自定義好所需的SingleMalta字體，離最后效果只差一步了，就是把自己定義的字體應用到你的Web中的DOM元素上：
h2.singleMalta { font-family: 'SingleMaltaRegular' }
效果：
看到上面的效果，那大家就知道我們實現成功了。那么關於@font-face幫你打造特殊效果的字體，到這里基本上就完成了，我在這里需要提醒使用者：
1、如果你的項目中是英文網站，而且項目中的Logo，Tags等應用到較多的這種特殊字體效果，我建議你不要使用圖片效果，而使用@font-face，但是你是中文網站，我覺得還是使用圖片比較合適，因為加載英文字體和圖片沒有多大區別，但是你加載中文字體，那就不一樣了，因為中文字體太大了，這樣會影響到項目的某些性能的優化；
2、致命的錯誤，你在@font-face中定義時，文件路徑沒有載對；
3、你只定義了@font-face，但並沒有應用到你的項目中的DOM元素上；
以上幾點都是在平時制作中常出現的問題，希望大家能小意一些，另外我們沒有辦法在購買所有字體，就算你實力雄厚，那也沒有辦法在一台服務器主機上放置你所有項目需要的字體。因此我給大家提供幾個免費字體下載的網址：Webfonts,Typekit,Kernest,Google Web Fonts,Kernest,Dafont,Niec Web Type,不然你點這里將有更多的免費字體。前面幾個鏈接是幫助你獲取一些優美的怪異的特殊字體，但下面這個工具作用更是無窮的大，他能幫你生成@font-face所需要的各種字體，這工具就是Font Squirrel。
最后在提醒一下，使用@font-face別的可以忘了，但Font Squirrel千萬不能忘，因為他能幫你生成@font-face所需的各種字體格式。
到此關於@font-face就介紹完了，不知道大家喜歡不喜歡，如果喜歡的話趕快動手實踐一下，有Blog的可以馬上運用上去，也可以炫一下。
2014年03月更新——@font-face無法在Firefox下正常工作的解決方案，詳細的請點擊：http://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie
著作權歸作者所有。
商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
原文: http://www.w3cplus.com/content/css3-font-face © w3cplus.com
一： {font-family:serif,sans-serif,fantasy,cursive}表示什么意思
這是CSS中的五大字體家族。
serif
serif 中文翻譯為“襯線字體族”。
serif 具有末端加粗、擴張或尖細末端，或以實際的襯線結尾的一類字體。
可以看出 serif 總是在文字末端做文章，這樣做的目的是增強可讀性，也就是說在字號比較小的時候，serif 一族的字體仍然是比較好辨認的。
serif 典型的字體有：Times New Roman、MS Georgia、宋體……
serif 還可衍生出兩種字體族：petit-serif（小襯線字體族（末端變化不明顯））、slab-serif（雕版襯線字體族（末端變化非常明顯））。由於顯示器顯示的字都不大，所以一般將小襯線字體族看作無襯線字體族，比如其中的黑體。
sans-serif
sans-serif 中文翻譯為“無襯線字體族”。sans- 前綴是法語，發音為 /san/，意為“無”。
sans-serif 字體比較圓滑，線條粗線均勻，適合做藝術字、標題等，與“襯線字體”相比，如果字號比較小，看起來就會有些吃力。
sans-serif 典型的字體有：MS Trebuchet、MS Arial、MS Verdana、幼圓、隸書、楷體……
cursive
cursive 中文翻譯為“手寫字體族”。
顧名思義，這類字體的字就像手寫的一樣。
cursive 典型的字體有：Caflisch Script、Adobe Poetica、迷你簡黃草、華文行草……
fantasy
fantasy 中文翻譯為“夢幻字體族”。
fantasy 主要用在圖片中，字體看起來很藝術，實際網頁上用得不多。
fantasy 典型的字體有：WingDings、WingDings 2、WingDings 3、Symbol……
monospace
monospace 中文翻譯為“等寬字體族”。
我們知道英文中各字母是不等寬的，但用 monospace，各個字母就是等寬的了，就可以像中文一樣排版了。
monospace 典型的字體有：Courier、MS Courier New、Prestige……
總結
總的來說字體分為兩個大類：serif、sans-serif，這兩個大類下又可以分：cursive、fantasy、monospace
二： 360和谷歌外部字體
最近，谷歌全面退出中國，谷歌官網域名google.com、谷歌香港google.com.hk都打不開， ping了一下google.com和google.com.hk兩個域名的服務器情況，最后ping出來的IP地址均顯示為“美國”，也就是說谷歌香港(google.com.hk)的服務器，已由香港轉移至美國，所以鏈接時間會很長，甚至斷斷續續出現請求超時的情況。
這樣就是說谷大神在中國再也神不起來了。欲哭無淚的是我們苦逼的IT啊，谷歌字庫不能用了，經網上一番找尋終於在wangzhan.360.cn上給解決了，雖然對360沒有什么好感，但其提供的這一套服務還是相當不錯的！
字體庫的引用方法：（注：360字體庫最近掛掉了，其實早在15年初google就在北京設置了服務器，ping fonts.googleapis.com 也可以發現，ip為203.208.40.136，地址是北京電信海淀區，比360鏡像要快很多,所以直接用fonts.googleapis.com即可，不必用fonts.useso.com）
-
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'> (family就等字體名稱，空格用+號代替)在頁面調用
-
@import url(http://fonts.googleapis.com/css?family=Ubuntu); (family就等字體名稱，空格用+號代替)在樣式文件里面調用，如font-family為 Wire One 則 http://fonts.useso.com/css?family=Wire+One
頁面JS調用方法(families就等字體名稱，空格用+號代替)
web字體庫的樣式調用方法：
樣式里面用法：font-family: 'Poiret One', sans-serif;（字體名稱）
三：（更詳細的介紹）
原文鏈接： http://www.ibm.com/developerworks/cn/web/1505_zhangyan_googlefont/#icomments
使用 Google Fonts 為網頁添加美觀字體
在線字體提供豐富多樣的字體樣式，能使頁面更美觀，更具吸引力。Google Fonts 就是一個開源的在線字體庫，使用起來簡單快速。
前言
文字是網頁中很重要的組成部分。為文字選擇一個合適的字體，能夠更好的展現一個網站的個性，表達所要傳遞的信息，同時吸引用戶來產生興趣。
說到字體，我們首先會想到 CSS 里面的 font，例如：
<html>
<head>
<style>
p { font-family: Arial, Helvetica, sans-serif; }
</style>
</head>
<body>
<p>some text</p>
</body>
</html>
在這段 HTML 代碼中為<p>標簽定義了字體，當瀏覽器解析<p>some text</p>標簽時，首先會在系統中查找 Arial 這個字體，如果找不到，就找 Helvetica 字體，如果還是找不到，就會查找瀏覽器默認的 sans-serif(非襯線)字體，最后把文字渲染出來。
什么是安全字體
安全字體這個概念，也許很多人都不是很熟悉，我們先舉個例子：
font-family: Arial, Helvetica, sans-serif;
這個對字體（font-family）的定義就是一個安全字體。每種操作系統都有自己默認安裝的字體，瀏覽器只能正常顯示操作系統中安裝了的字體。而不同的操作系統默認安裝的字體不完全相同，有的甚至名稱都不一樣，在這種情況下，我們必須定義安全字體，使字體在所有的瀏覽器中都能夠正常顯示。
在上面這個 font-family 的定義中，我們選擇 Arial 作為首選字體（注：Arial 字體是最常用的 sans serif 字體，也是 Windows 的默認字體，當字體很小是不容易閱讀），但是，蘋果系統中沒有這個字體，所以我們選擇 Helvetica（和 Arial 很相似）作為第二備選字體，最后我們選擇 sans-serif 作為第三備選字體，如果在一個既沒有 Arial 也沒有 Helvetica 的系統里，那么瀏覽器會使用默認的 sans-serif 字體來渲染文字。這樣，我們很大程度上保證了使用不同操作系統的訪問者都能看到相同（至少是類似）的頁面文字。
除了 Arial，常見的安全字體還有：
- Verdana 字體，它是微軟公司的核心字體之一，專門為屏幕顯示而開發的。它的應用廣泛，寬度大而易於閱讀，是顯示器中最清晰的字體。CSS 寫法：font-family: Verdana, Geneva, sans-serif;
- Times New Roman 字體，它是最常用的 serif 字體，是瀏覽器默認的字體。小號字的易讀性也很差。CSS 寫法：font-family: 'Times New Roman', Times, serif;
有興趣的讀者可以通過這個鏈接來查閱常用的安全字體。http://www.w3schools.com/cssref/css_websafe_fonts.asp
在網頁開發中，應該盡量使用安全字體，也就是高度通用的字體，這樣，訪問者才能流暢的閱讀網頁的所有內容。
但是，網頁設計師一定不會滿足於使用這些安全字體，如何才能使用漂亮的字體，並能在普通用戶的瀏覽器中被正確的渲染出來？答案是：使用@font-face 方案。
@font-face 標簽簡介
@font-face 被列為了 CSS3 的一項新特性，其實它並不是什么新鮮技術，它最早出現在 CSS2 的規范定義中，但是在 CSS2.1 中又被刪除，現在被正式列入 CSS3。目前主流的瀏覽器（IE 4+/Firefox 3.5+/Chrome 1+/Safari 3.1+/Opera 10+）都能夠支持這個屬性，所以不用擔心會有瀏覽器兼容性問題。
@font-face 允許您在網頁中使用電腦中沒有安裝的字體，完全擺脫安全字體的限制。只需將字體包安裝在服務器上，當用戶加載網頁時，字體包會自動下載到用戶機器上，保證字體能夠正確渲染。
隨着@font-face 的不斷流行，產生了許多新的字體格式圖標集，稱為網絡字體。Google Fonts API 就是基於@font-face 的特性開發的一套優秀的網絡字體庫。
網絡字體的優點有很多：
- 使用的是真正的文本，而不是圖片，放大和縮小都不會影響渲染效果，用戶體驗好；
- 可以被搜索引擎辨認；
- 不像圖片每次需要重新生成，添加刪除更方便。
如何使用 Google Fonts API
Google Fonts 提供了超過 600 種的高質量的字體，所有的瀏覽器都兼容，無需引入 JavaScript，簡單易用，更重要的是，免費。（雖然，暫時不支持中文字體，因為中文字體庫實在是太大了）。
現在來看下，如何在網頁中使用 Google Fonts。
挑選字體
登錄Google Fonts （谷歌字體官方網站）。（圖 1）
圖 1.Google Fonts 主頁
在主頁中，您可以直接瀏覽所有的字體，可以按單個詞語來查看，或者按句子段落來查看整體效果，還可以調整字體大小。如果您對字體分類比較熟悉，就可以使用左邊的搜索條件對字體作篩選。找到您喜歡的字體之后，點擊"Add to Collection"按鈕，然后在網頁下方的"Collection"中即可找到您添加的所有字體。
使用選中的字體來測試您的文字
在上一頁面（圖 1）的"Collection"中，點擊"review"。在預覽頁面中（圖 2），輸入您的測試文字，來查看效果。另外在"review"頁面上，您還可以調整其它的與字體相關的樣式，比如字體大小，間隔，變換，等等。在圖 2 中，我們選擇測試的是"Condiment"字體
圖 2.Google Fonts 預覽頁面
在您的網頁中添加字體鏈接。
如果確認使用該字體， 在網頁下方的"Collection"中，點擊"Use"按鈕，在接下來的頁面中，您將看到詳細的說明，包括字體鏈接和如何將字體添加到您的網頁中。
有三種方式來添加字體鏈接：
- Standard 方式：
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Condiment'>
- @import 方式：
@import url(http://fonts.googleapis.com/css?family=Condiment);
- JavaScript 方式：
（通過添加動態腳本並執行來導入字體，代碼省略）
下一步定義在那個標簽上使用該字體，例如：在<class="myheader">標簽上使用，
.myheader {font-family: 'Condiment', cursive;}
大功告成，您現在可以打開您的網頁欣賞一下了(圖 3)。
圖 3.測試頁面效果
清單 1.測試頁面代碼
<html>
<head>
<link rel="stylesheet" type="text/css"
href='http://fonts.googleapis.com/css?family=Condiment'>
<style>
.myheader {
font-family: Condiment, cursive;
font-size: 48px;
text-align: center;
}
</style>
</head>
<body>
<div class="myheader"> Test my own text !</div>
</body>
</html>
優化字體包加載
如果您不是大范圍的在網頁中使用 Google 字體，只是在標題或 logo 里使用，那么可以在 url 里添加 text 參數，來限制加載的字體包的大小，最高能縮減 90%左右的大小，以此來節約下載流量。例如：http://fonts.googleapis.com/css?family= Condiment'&text=Hello
這樣，您只會下載 h，e，l，o 這四個字母的字體，大大縮小了字體包的大小。
下載字體包
您還可以把字體包下載並安裝到本地，這樣您就可以在本地使用這些字體，比如在 Notepad，Microsoft Office 里。
方法為：在圖 3 中，點擊下載按鈕， 選擇"Download the font families in your Collection as a zip file"
高級應用 API
Google Fonts 還開放了一些接口（稱為 Developer API），用於獲取字體庫的信息數據。
比如實時獲取字體庫實際可用的字體及其相關信息：
https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY
這個請求的返回結果是一個 JSON 類型的數據，包括了每種字體的名稱，樣式種類（比如 regular，italic），版本，修改時間，包含的樣式包的請求地址，等等。
請注意，在 URL 里面有一個 key，這個 key 是和您的 web 應用工程相聯系的，只有注冊過的 web 應用才能成功調用 Developer API。我們必須要在 Google Cloud Console 注冊之后，才能獲取這個 key。
關於這個 Developer API， 可以參閱這個鏈接。
結束語
Google Fonts 很強大，但是也碰到一些加載的問題，最好還是字體聲明的時候，在最后添加一個安全字體，來保證萬無一失。另外的一個建議是，在網頁中要適量的使用花樣的字體，讓整個頁面保持干凈簡潔。
四： 關於＠font-face具體用法
1 http://www.w3cplus.com/content/css3-font-face
2 http://www.jb51.net/web/89797.html