首先我們一起來看看@font-face的文法規則：
取值說明
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等字型達到更多種浏覽版本的支援。
但為了讓各多的浏覽器支援，你也可以寫成：
說了這麼多空洞的理論知識，大家一定有點心癢癢了，那麼我們先來看看W3CPLUS首頁中導航部分的蘭色字型是如何實作的，假如我們有一個這樣的DOM标簽，需要應用自定義字型：
HTML Code:
通過@font-face來定義自己的Web Font:
我在這裡采用的是相對路徑，當然大家也可以使用絕路徑。到這裡我們就需要把定義好的字型應用到我們實際頁面中去：
效果：
看到上面的效果，我想大家會感到@font-face很神奇，同時也想争着做做看，可是一動手才發現，特殊字型我要怎樣才能得到，那些.eot,.woff,.ttf,.svg這些字型格式又怎麼擷取呢？有些朋友可能就不知道如何運手了，那麼我們就帶着這些問題來一個全程完成的執行個體吧：
一、擷取特殊字型：
我們拿下面這種single Malta字型來說吧：
Single Malta下載下傳下來後，需要把它解壓縮出來：
二、擷取@font-face所需字型格式：
如果你進入頁面沒有看到上圖，你可以直接點選導航:
如果你看到了上面的界面，那就好辦了，我們來看如何應用這個工具生成@font-face需要的各種字型，先把我們剛才下載下傳的字型上傳上去：
上傳後按下圖所示操作：
現在從Font Squirrel下載下傳下來的檔案已經儲存在你本地的電腦上了，接着隻要對他進行解壓縮，你就能看到檔案清單如下所示：
大家可以看到，解壓縮出來的檔案格式，裡面除了@font-face所需要的字型格式外，還帶有一個DEMO檔案，如果你不清楚的也可以參考下載下傳下來的DEMO檔案，我在這裡不對DEMO說明問題，我主要是給大家介紹如何把下載下傳下來的檔案有價值的運用到我們的項目中。
例如在自己的本地建立了一個fontface項目：
為了讓項目結構更清晰，我們在項目中單獨建立一個fonts目錄，用來放置解壓縮出來@font-face所需的字型格式：
現在@font-face所需字型已經加載到本地項目，現在本地項目中的style.css中附上我們需要的@font-face樣式
到這裡為止，我們已經通過@font-face自定義好所需的SingleMalta字型，離最後效果隻差一步了，就是把自己定義的字型應用到你的Web中的DOM元素上：
看到上面的效果，那大家就知道我們實作成功了。那麼關于@font-face幫你打造特殊效果的字型，到這裡基本上就完成了，我在這裡需要提醒使用者：
1、如果你的項目中是英文網站，而且項目中的Logo，Tags等應用到較多的這種特殊字型效果，我建議你不要使用圖檔效果，而使用@font-face，但是你是中文網站，我覺得還是使用圖檔比較合适，因為加載英文字型和圖檔沒有多大差別，但是你加載中文字型，那就不一樣了，因為中文字型太大了，這樣會影響到項目的某些性能的優化；
2、緻命的錯誤，你在@font-face中定義時，檔案路徑沒有載對；
3、你隻定義了@font-face，但并沒有應用到你的項目中的DOM元素上；
到此關于@font-face就介紹完了，不知道大家喜歡不喜歡，如果喜歡的話趕快動手實踐一下，有Blog的可以馬上運用上去，也可以炫一下。
本文轉自 h2appy 51CTO部落格，原文連結：http://blog.51cto.com/h2appy/1784964，如需轉載請自行聯系原作者