@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>
需要注意的几点：
- 中文字体不建议使用@font-face，字体资源会比较大；
- 字体路径需要正确，否则没有效果；
- @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
