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