在CSS中使用多个@ font-face规则

如何在我的CSS中使用超过@font-face规则?

我已经插入到我的样式表中:

 body { background: #fff url(..http://img.dovov.combody-bg-corporate.gif) repeat-x; padding-bottom: 10px; font-family: 'GestaRegular', Arial, Helvetica, sans-serif; } @font-face { font-family: 'GestaReFogular'; src: url('gestareg-webfont.eot'); src: local('☺'), url('gestareg-webfont.woff') format('woff'), url('gestareg-webfont.ttf') format('truetype'), url('gestareg-webfont.svg#webfontg8dbVmxj') format('svg'); } 

目前这只适用于网站上的整个文本。 但是,我想指定h1使用不同的字体。 我怎样才能做到这一点?

请注意,您可能也有兴趣:

自定义网页字体不能在IE9中工作

其中包括下面看到的CSS更详细的描述(并解释了使IE6-9更好的调整)。


 @font-face { font-family: 'Bumble Bee'; src: url('bumblebee-webfont.eot'); src: local('☺'), url('bumblebee-webfont.woff') format('woff'), url('bumblebee-webfont.ttf') format('truetype'), url('bumblebee-webfont.svg#webfontg8dbVmxj') format('svg'); } @font-face { font-family: 'GestaReFogular'; src: url('gestareg-webfont.eot'); src: local('☺'), url('gestareg-webfont.woff') format('woff'), url('gestareg-webfont.ttf') format('truetype'), url('gestareg-webfont.svg#webfontg8dbVmxj') format('svg'); } body { background: #fff url(..http://img.dovov.combody-bg-corporate.gif) repeat-x; padding-bottom: 10px; font-family: 'GestaRegular', Arial, Helvetica, sans-serif; } h1 { font-family: "Bumble Bee", "Times New Roman", Georgia, Serif; } 

而你的后续问题:

问:我想使用“Bumble bee”这样的字体。 如何使用@font-face在用户的计算机上使用该字体?

请注意,我不知道你的Bumble Bee字体或文件的名称是什么,所以应该相应地进行调整,并且字面声明应该先于(之前)使用它,如上所示。

问:我还可以使用其他@font-face字体“GestaRegular”吗? 我可以在同一个样式表中使用两者吗?

按照我在示例中所显示的,将它们列在一起。 没有理由不能申报。 @font-face所做的就是指示浏览器下载并创build一个可用的字体。 请参阅: http : //iliadraznin.com/2009/07/css3-font-face-multiple-weights