关于@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,这样在同一网页中就可以使用多种字体了。

原文地址:https://www.cnblogs.com/jf-67/p/9183828.html