@font-face是CSS3中的功能，可以利用它来修改Web网页中的字体。
@font-face使用的语法规则：

<style type="text/css">
    @font-face {
          font-family: <YourWebFontName>; // 自定义字体名称，在后续使用中会用到
          src: <source> [<format>][,<source> [<format>]]*; // 字体地址
          [font-weight: <weight>]; // 可选，字体粗细
          [font-style: <style>]; // 可选，字体样式
    }

    tag {
        font-family: "YourWebFontName"; // 使用设置的字体名称在标签中使用网页字体
    }
</style>

需要注意的几点：

1. 中文字体不建议使用@font-face，字体资源会比较大；
2. 字体路径需要正确，否则没有效果；
3. @font-face只是定义了网页字体，需要在标签中使用才有效果；

目前网页字体有几种格式：
.ttf格式、.otf格式、.woff格式、.eot格式、.svg格式，不同浏览器对于不同格式字体的支持是不一样的，为了兼容尽量多的浏览器，建议字体至少包含eot格式（兼容IE浏览器）、woff格式（主流浏览器）。

@font-face {
          font-family: <YourWebFontName>; // 自定义字体名称，在后续使用中会用到
          src:  url('YourWebFontName.eot'),
                url('YourWebFontName.woff') format('woff');
    }

获取免费字体的网站：
Google Web Fonts
Dafont.com

在线转换字体格式网站：
www.fontsquirrel.com

参考博客 CSS3 @font-face