@font-face是CSS3里一個(gè)很重要的屬性，從CSS2就開(kāi)始考慮，但CSS2.1中還沒(méi)出現，CSS3嘗試將它帶到標準中來(lái)。

有了它，我們可以擺脫網(wǎng)站安全字體且不使用圖片文件。并且各個(gè)瀏覽器的兼容性都很好，也包括惡名昭著(zhù)的IE6.前提是用對合適的字體文件。

先說(shuō)一下@font-face的語(yǔ)法規則：

YourWebFontName可以自定義，自定義的時(shí)候不要用數字，最好使用官方默認字體名稱(chēng)。

source是自定義的字體存放路徑，可以是相對，也可以是絕對。

format是字體的格式。選中字體文件右鍵屬性可以看到?；蛘咴凇邦?lèi)型”欄里。主要有以下幾種類(lèi)型：truetype,opentype,truetype-aat,embedded-opentype,avg等。實(shí)踐中覺(jué)得用處不大。不寫(xiě)瀏覽器也支持。
后面的就不多說(shuō)了，大家都很熟悉了。

一、TureTpe(.ttf)格式：

.ttf字體是Windows和Mac的最常見(jiàn)的字體，是一種RAW格式，因此他不為網(wǎng)站優(yōu)化,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOSMobile Safari4.2+】；

二、OpenType(.otf)格式：

.otf字體被認為是一種原始的字體格式，其內置在TureType的基礎上，所以也提供了更多的功能,支持這種字體的瀏覽器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOSMobile Safari4.2+】；

三、Web Open Font Format(.woff)格式：

.woff字體是Web字體中最佳格式，W3C推薦，主要優(yōu)勢是針對瀏覽器進(jìn)行優(yōu)化，字體文件小，他是一個(gè)開(kāi)放的TrueType/OpenType的壓縮版本，同時(shí)也支持元數據包的分離,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；

四、Embedded Open Type(.eot)格式：

.eot字體是IE專(zhuān)用字體，可以從TrueType創(chuàng )建此格式字體,支持這種字體的瀏覽器有【IE4+】；

五、SVG(.svg)格式：

.svg字體是基于SVG字體渲染的一種格式,支持這種字體的瀏覽器有【Chrome4+,Safari3.1+,Opera10.0+,iOSMobile Safari3.2+】。

實(shí)踐中，我們應用.eot和.woff兩種格式即可。常用的格式是.ttf格式。前兩種格式都不容易找到，這里給大家推薦一個(gè)好用的字體轉化工具：http://www.fontsquirrel.com/fontface/generator

上傳你本地的字體文件，便會(huì )生成一個(gè)壓縮包，里面有你需要的各種格式的字體，神奇的是，還有一個(gè)CSS樣式。很有些拿來(lái)主義的意思吧，同時(shí)贊嘆一下這個(gè)工具還真是人性化呢。

我們也可以從這個(gè)網(wǎng)址下載些英文字體：www.dafont.com

在應用過(guò)程中，需注意以下幾點(diǎn)：

1.傳聞IE6 IE7不完全支持@font-face 不得而知，至少我的這幾次實(shí)際測試都是OK的。

2.考慮字體授權和版權問(wèn)題，嵌入字體很容易從網(wǎng)站上下載到，這是字體廠(chǎng)商最主要的顧慮。確保只使用被授權為使用到網(wǎng)站的字體。

3.另外，中文字體普遍比英文字體偏大，中文字體都以MB計，而英文只有幾十K或者幾百K，所以使用中文字體和切成圖片的做法在占用服務(wù)器流量和加載時(shí)間上幾乎相當。

 

應用的時(shí)候不起作用，我們可以從以下方面檢查：

1.字體是否靠譜？這句不是廢話(huà)，我的確是因為一個(gè)不靠譜的字體浪費了很多時(shí)間。

2.定義完字體之后，需要另寫(xiě)一個(gè)樣式引用。比方說(shuō)h1{font-family:*****;}并且應用到對應的結構中。

3.字體的路徑是否正確。

2012年6月15日補充修正：

以上的方法是基礎，但有點(diǎn)兒老土。還要下載一個(gè)文件到本地。這一點(diǎn)，google已然走在前面，為我們考慮的很周到：FontAPI，這是一個(gè)很酷的東東，可以讓我們很方便的使用網(wǎng)絡(luò )字體，而且這些字體都是免費的，你無(wú)需擔心版權的問(wèn)題。
使用方法：
第一步：選擇
http://www.google.com/webfonts 從這里面可以找到需要的字體

第二步：添加
在你所選字體的后面點(diǎn)擊

這個(gè)按鈕，彈出頁(yè)面里會(huì )生成相對應的代碼：

連JS都有，是不是很好很強大。
還很貼心的做了所選字體影響頁(yè)面下載速度的圖表：

打開(kāi)自動(dòng)生成的link代碼的地址，比如：http://fonts.googleapis.com/css?family=Reenie+Beanie，會(huì )發(fā)現就是一段CSS樣式：
@font-face { font-family: 'Tangerine'; font-style: normal;font-weight: normal; src: local('Tangerine'),url('http://themes.googleusercontent.com/font?kit=_jMq7r9ahcBZZjpP8hftNA')format('truetype');}
參數后面跟的是字體名字，字體中含有空格的用+替換，使用多個(gè)字體用|隔開(kāi)。

還可以跟font-style（italic or i|bold|normal|bold italic orbi），比如說(shuō)：
http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans

具體數值也可以：
http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700

第三步：引用
引用是必要步驟。并非是添加完這個(gè)字體后網(wǎng)頁(yè)所有的字體都變成這種字體。不引用，不生效。

另外，剛才實(shí)驗了一下，空格不用+替換也可以生效。引用的時(shí)候，含有空格的字體不加引號也可以生效。全當是為了語(yǔ)法更規范吧。發(fā)現網(wǎng)上的案例大多都會(huì )在后面跟一個(gè)備用字體，比如：serif(中文釋義：n. 襯線(xiàn)，截線(xiàn)（襯線(xiàn)指的是字體起始末端的細節裝飾）；襯線(xiàn)體）。 cursive（中文釋義： adj.（指字跡）草書(shū)的  n. 草書(shū)）

看起來(lái)與普通的web-font定義并無(wú)二樣，只是url資源使用Google Font API庫中的字體。

相對于其它的網(wǎng)絡(luò )字體服務(wù)，Font API有以下優(yōu)勢(與Ajax API類(lèi)似)：

使用方法靈活簡(jiǎn)單，節省自己的流量； 快速，穩定。

缺點(diǎn)：

只能用英文字體，中文字體無(wú)能為力

。

沒(méi)有eot格式，字體地址用IE打開(kāi)是ttp格式，用FF打開(kāi)是woff格式，IE兼容性不好。

參考資料

https://developers.google.com/webfonts/docs/getting_started?hl=zh-CN

http://www.cnblogs.com/whoknows/articles/2225277.html

http://www.qianduan.net/google-font-api-web-font-and-chinese.html

6.21捷報！給神飛留言后，居然回復了回復了，好激動(dòng)啊。偶像啊。

一開(kāi)始以為有了google fontapi就可以更好的推廣CSS3的@font-face了，畢竟使用方法很簡(jiǎn)便。但是，如此一來(lái)，連神飛對于它的IE方面的兼容都沒(méi)辦法，只能望而興嘆了。要知道，在我們網(wǎng)站，不能兼容IE678？想都別想

2013年5月8日補充修正：

公司做大了就會(huì )遇到很多官司糾紛。這個(gè)軟件不能裝啦，這個(gè)字體不能用啦。

通過(guò) CSS3 的 @font-face 在網(wǎng)頁(yè)上引入 Web 字體是有風(fēng)險的，尤其對于商業(yè)性網(wǎng)站。

對于個(gè)人站點(diǎn)，如果想使用有合法授權的 Web字體，可以訪(fǎng)問(wèn)這些：
http://webfonts.fonts.com/
https://typekit.com/
http://www.google.com/webfonts

嗯，都是英文字體。。?？磥?lái)我等切工最近幾年內休想用到@font-face了。