CSS3 @font-face

@font-face中我們至少需要.woff,.eot兩種格式字體，甚至還需要.svg等字體達到更多種瀏覽版本的支持。

HTML Code:

Neues Bauen Demo

通過@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別的可以忘了，但Font Squirrel千萬不能忘，因爲他能幫你生成@font-face所需的各種字體格式。
來源： http://www.w3cplus.com/content/css3-font-face