@font-face的详细用法

在CSS 3中，可以用@font-face属性来利用服务器端字体，现在来总结下@font-face属性的详细用法：

1.下载安装所需的服务器端字体

在项目中，客户一般会提供具有版权的字体文件，或者我们可以在google font里下载一些免费的字体

两个下载字体的网址：

a. google fonts：https://www.google.com/fonts/

b. fontsquirrel：https://www.fontsquirrel.com/

现在以google fonts：Open Sans字体为例，演示具体的步骤

1.1 字体下载

在google fonts里搜索“open sans”，选择第一个搜索结果，点击右上角的下载按钮，下载zip文件。

下载的文件解压后，可以看见，第一个搜索项里包含的10个字体都下载下来了，我们可以根据具体的需求选择相应的字体

1.2 字体格式转换

下载的字体打开一看，只有.ttf格式的字体文件，但是在@font-face属性里，一般要引入.eot + .ttf /.otf + svg + woff 才能达到让所有浏览器的完美支持。

那么我们就需要把.ttf文件转换成字体的其他格式文件，可以在https://www.fontsquirrel.com里来操作

将Open Sans Bold字体上传进行后，下载KIT文件里包含了5种字体格式

1.3 字体引入

新建项目 Web Font，项目文件夹结构，将以上5种字体格式文件拷到对应的fonts文件夹下；

创建相应的html文件；

从上面的文件里，我们可以看到有个stylesheet.css文件，打开可以看见，我们转换的Open Sans Bold字体的@font-face属性已经写好了，我们可以拿过来直接用，注意要修改路径。

在global.css里引入“Open Sans Bold”字体，设置相应的样式

最后，页面展示的效果如下，从firebug里可以看到，p元素的字体为我们设置的字体“Open_Sans Bold”