CSS中有多个font-face [英] Multiple font-face in CSS

问题描述

如何在CSS中使用多种类型的@ font-face。

How can I use more than one type of @font-face in my CSS.

我已将其插入到样式表中：

I've inserted this into my stylesheet:

body {
background: #fff url(../images/body-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使用不同的字体字体。

This currently only applies for the whole body text on the site, but I would like to specify h1 to use a different font-face font.

我该如何做？感谢

推荐答案

注意，您可能还对以下内容感兴趣：

Note, you may also be interested in:

自定义网络字体在IE9中无法使用

其中包括您在下面看到的CSS的更多描述性细节（并解释在IE6-9上使其工作更好的调整）。

Which includes a more descriptive breakdown of the CSS you see below (and explains the tweaks that make it work better on 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(../images/body-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声明应该在你使用它之前（如上所述）。

Note I don't know what the name of your Bumble Bee font or file is, so adjust accordingly, and that the font-face declaration should precede (come before) your use of it, as I have above.

这篇关于CSS中有多个font-face的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！