关于@font-face的使用

　　以前在写网页的时候，总是使用浏览器默认的字体，因此从未使用过@font-face，然而，最近在做官网的时候，UI规定了字体，要在所有浏览器下都展现同一效果。多番查询下，发现@font-face用起来是比较容易的。

　　首先我们在使用某一特定字体的时候，需要先下载字体的源文件，例如方正北魏楷书简体（FZBWKSJW），方正兰亭特黑长简体等等，常用的字体格式有：.eot、.svg、.ttf、.woff这四种。　　

　　引自w3c的一段话：

　　　　Internet Explorer 9, Firefox, Opera,Chrome, 和 Safari支持@font-face 规则.

　　　　但是, Internet Explorer 9 只支持 .eot 类型的字体, Firefox, Chrome, Safari, 和 Opera 支持 .ttf 与.otf 两种类型字体.

　　　　注意： Internet Explorer 8 及更早IE版本不支持@font-face 规则.

　　

　　现在，假如，有.woff格式的文件，可以将其转换为其他三种格式的文件，这里推荐一个很好用的 在线字体转换网站 。然后选择你所需要的字体格式进行转换。转换完后，会自动下载。

 

　　使用：

　　例如：在index.html文件中使用方正北魏楷书简体（FZBWKSJW），那么可以这样做：

<style>
    @font-face {
        font-family: myFont;
        src: url("./fonts/FZBWKSJW.ttf"),
             url("./fonts/FZBWKSJW.eot");
     }

      .txt {
         font-family: myFont;
      }
</style>    

　　其中，@font-face里面的font-family用于定义字体的名称（必需的），src定义字体所存放的路径。

 

　　注意：同一网页中可定义多个@font-face，这样在同一网页中就可以使用多种字体了。