如何使用web fonts？

1.将你的字体上传到服务器

建议将字体文件与你的css文件放在同一个文件夹中；或者将这些字体文件放在一个单独的文件夹中，并命名为fonts，然后把该文件夹与你的css文件放在同一个位置。 将这些字体文件放在.css文件附近的好处是使我们在编辑CSS时更容易映射到这些字体文件。

2.在css文件中增加@font-face规则

这样做是在CSS文件中创建字体的名称，以便当我们使用该字体时，知道在哪里可以找到字体文件，并允许用户的浏览器加载和显示它们。将@ font-face选择器放在CSS文件顶部，然后再放置其他CSS。 声明@ font-face选择器时，我们将指定字体的名称，放置不同字体文件的url以及字体的样式。

如下声明了两个字体：

@font-face {
    font-family: 'On-AirInline';
    src: url('fonts/on-air-inline-webfont.eot');
    src: url('fonts/on-air-inline-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/on-air-inline-webfont.woff') format('woff'),
         url('fonts/on-air-inline-webfont.ttf') format('truetype'),
         url('fonts/on-air-inline-webfont.svg#On-AirInline') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'On-AirRegular';
    src: url('fonts/on-air-regular-webfont.eot');
    src: url('fonts/on-air-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/on-air-regular-webfont.woff') format('woff'),
         url('fonts/on-air-regular-webfont.ttf') format('truetype'),
         url('fonts/on-air-regular-webfont.svg#OnAirRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

3.在css中使用声明的字体

接下来，就可以在你的css选择器中应用上面的字体啦：

h1 {
    font-family: 'On-AirRegular';
}
h2 {
    font-family: 'On-AirInline';
}