css3 中@font-face 一个css文件可以定义多种字体

今天一个朋友问过，css3中@font-face可以自定义字体，但是他想在页面中定义多个字体，是不是@font-face会像类名或标签定义一样，也会有优先级这样的问题，比如:

@font-face {

    font-family: 'font1';

    src: url('font/font1.eot'); 

   ...

}

@font-face {

    font-family: 'font2';

    src: url('font/font2.eot'); 

   ...

}

第一个会被最后一个会给重新定义吗或者最后一个优先级高，只显示font2吗?

实践是检验真理的唯一标准！

网上特意下了两种字体，一番转换结束之后...

<style>

@font-face {
    font-family: 'lamebrai';
    src: url('font/lamebrai-webfont.eot'); /* IE9 Compat Modes */
    src: url('font/lamebrai-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('font/lamebrai-webfont.woff') format('woff'), /* Modern Browsers */
             url('font/lamebrai-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('font/lamebrai-webfont.svg#lamebrai-webfont') format('svg'); /* Legacy iOS */
   }
   @font-face {
    font-family: 'chancelaresca';
    src: url('font/pw_chancelaresca-webfont.eot'); /* IE9 Compat Modes */
    src: url('font/pw_chancelaresca-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('font/pw_chancelaresca-webfont.woff') format('woff'), /* Modern Browsers */
             url('font/pw_chancelaresca-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('font/pw_chancelaresca-webfont.svg#pw_chancelaresca-webfont') format('svg'); /* Legacy iOS */
   }
.test1{
font-family:"lamebrai","Arail";
}
.test2{
font-family:"chancelaresca","Arail";
}

</style>

html部分：

<div class="test1">test </div>

<div class="test2">test </div>

结果直接上图：

可以看到两种字体都出来了。