@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体。可能有人要问，使用这种字体，IE兼容性怎么办，那就大错特错了，@font-face甚至向下兼容到IE4，想想看自己的页面上能有自己自定义的字体是一件多么帮的事情啊，现在贴出一点学习过程与大家分享
首先选一款你要用的字体，有免费下载的或者付费购买的（我反正是下免费的），这个demo种我选的是一个叫alex_brush的字体。那么@font-face的语法格式如下：
1 @font-face { 2 font-family: ‘alex_brushregular‘; 3 src: url(‘fonts/alexbrush-regular-webfont.eot‘); 4 src: url(‘fonts/alexbrush-regular-webfont.eot?#iefix‘) format(‘embedded-opentype‘), 5 url(‘fonts/alexbrush-regular-webfont.woff‘) format(‘woff‘), 6 url(‘fonts/alexbrush-regular-webfont.ttf‘) format(‘truetype‘), 7 url(‘fonts/alexbrush-regular-webfont.svg#alex_brushregular‘) format(‘svg‘); 8 9 font-weight: normal; 10 font-style: normal; 11 12 } 13 #alex-brush{ 14 font-family: "alex_brushregular"; 15 font-size: 40px; 16 }
@font-face里url是你所使用的自定义的字体的文件位置，可以是相对路径也可以是绝对路径，format是字体格式。设置好之后，只要在对应的DOM对象使用就可以了
这里只是教大家如何使用，至于那些字体格式就不一一介绍了，有人说这些个格式的字体我如何全部下载到，通常情况下只有一种，但是浏览器只兼容对应的格式的字体，这个时候就需要使用到第三方软件fontsquirrel。接下来让我们看看这个软件的界面吧
将你所下载的单个字体通过 ADD FONS 按钮上传，上传完成后就会出现上图中绿色的那条状态栏（原谅我比较懒，只传了一张图），然后点击上图右下的蓝色 DOWNLOAD 按钮，点击过后稍微等待，就会讲字体包下载到你的本地，接着将字体放置到代码所写的位置就可以使用啦。
本人亲测IE6+，火狐，谷歌全部兼容，非常好用。如有不对的地方，欢迎指出