之前如果想在自己的網站使用某些好看的字體，總是迫不得已得在PS里先把字體圖片做好。雖然這樣做也能達到我們想要的效果，但是這樣就增加了HTTP請求（如果在多處使用的話），即使合並所有圖片，也不好管理，靈活性不高，哪一天想換種更好看的字體，那工作量，想想都沒勁！幸好CSS3新增了@font-face模塊，可以幫助我們輕松解決Web頁面中使用優雅字體的方式，而且我們可以根據需要自定義多種字體，但是每個@font-face只能定義一種，若需要多個字體就啟用多個@font-face規則。
@font-face 主要就是把自己想要的，或者自己定義的Web字體嵌入到Web頁面中，然后這些字體就會被放置在服務器上，瀏覽器會根據指定的命令將對應的字體下載到本地緩存，使用它來修飾文本。也就是我們所說的Web字體嵌入。想要更詳細的了解，可以到W3C看看：http://www.w3school.com.cn/css3/css3_font.asp
看一下瀏覽器兼容：
Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字體 。
Firefox, Chrome, Safari, 和 Opera 支持 .ttf (True Type字體) 和 .otf (OpenType) 字體字體類型 。
Chrome, Safari 和 Opera 也支持 SVG 字體/折疊。
Internet Explorer 同樣支持 EOT (Embedded OpenType) 字體。
注意： Internet Explorer 8 以及更早的版本不支持新的 @font-face 規則。
兼容所有瀏覽器的聲明方法:
@font-face{ font-family: 'SingleMaltaRegular'; /*自定義字體名稱*/ src: url('../fonts/singlemalta-webfont.eot'); /*IE9兼容模式*/ src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'), /*IE6~IE8*/ url('../fonts/singlemalta-webfont.woff') format('woff'), /*現代瀏覽器*/ url('../fonts/singlemalta-webfont.ttf') format('truetype'), /*Safari,Android,iOS*/ url('../fonts/singlemalta-webfont.svg#SingleMaltaRegular') format('svg'); /*Legacy iOS*/ font-weight: normal; font-style: normal; }
PS：上面只是聲明了自定義字體的規則，想要使用還得調用它：
p{ font-family: "SingleMaltaRegular"; }
@font-face 語法：
font-family : 其屬性值指定的是自定義的字體名稱，最好就是直接使用下載字體的默認文件名，然后需要將它引用到元素的font-family中。雖然自定義了自己想要的字體，但是也得在元素中使用它才有效果。【必選屬性】
src : 其屬性值指定自定義字體的存放路徑，可以是相對路徑或者絕對路徑。format()指定的是自定義的字體格式，主要用來幫助瀏覽器識別，主要有：truetype，opentype，truetype-aat，svg，embedded-opentype等類型。【必選屬性】
font-weight 和 font-style ：分別用來指定字體是否加粗和定義字體樣式。當然還可以設置font-size等字體屬性。【可選屬性】
字體的獲取：
在@font-face中，使用了四種字體格式EOT,WOFF,TTF,SVG 。所以我們就需要解決獲取字體的問題！
我們可以在 Dafont.com 網站下載我們想要的特殊字體，免費的：
Dafont.com : http://www.dafont.com/
但是呢，從Dafont.com下載的字體僅有TTF格式，所以，我們還需要字體轉換工具，我們可以使用 Fontsquirrel在線轉換工具：http://www.fontsquirrel.com/tools/webfont-generator 只要將之前在Dafont.com下載的TTF格式的字體文件上傳到網站，然后選擇OPTIMAL，勾選復選框，然后Download就可以拿到我們想要的所有字體文件啦！
PS：Dafont.com網站里面也有很多字體圖標可以使用，這方面可以自己去搜索，包括如何制作字體圖標等。