在CSS中使用多个@ font-face规则 [英] Use multiple @font-face rules in CSS

问题描述

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

我已经插入这到我的样式表：

 身体{
背景：#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'）格式（'woff'），
 url（'gestareg-webfont.ttf'）格式'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'）格式（'woff'），
 url（'bumblebee-webfont.ttf'）格式'truetype'），
 url（'bumblebee-webfont.svg＃webfontg8dbVmxj'）format（'svg'）; 
} 
 
 @ font-face {
 font-family：'GestaReFogular'; 
 src：url（'gestareg-webfont.eot'）; 
 src：local（'☺'），
 url（'gestareg-webfont.woff'）格式（'woff'），
 url（'gestareg-webfont.ttf'）格式'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; 
 
 $ / code $ / pre 
 
 
 
 
和你的后续问题：
 
 
 
 
  Q。例如，我想使用诸如Bumble bee之类的字体。如何使用 @ font-face 在用户的
计算机上显示该字体？
 
 
请注意，我不知道您的Bumble Bee字体或文件的名称是什么，所以请相应地进行调整，并且字面声明应该在您使用之前（之前）我已经显示在上面了。
 
 
  Q。我还可以使用其他的 font-face 字体GestaRegular以及？我可以在同一个样式表中使用两者吗？
 
 
没有理由不能申报。所有这些 @ font-face 都会指示浏览器下载并使字体系列可用。请参阅： http://iliadraznin.com/2009/07/css3-font面对多重权重 
 
How can I use more than @font-face rule 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');
}
This currently only applies for the whole body of text on the site. But, I would like to specify h1 to use a different font. How can I do this?
解决方案
Note, you may also be interested in:

Custom web font not working in IE9

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;
}




And your follow-up questions:

  
Q. I would like to use a font such as "Bumble bee," for example. How can I use @font-face to make that font available on the user's
  computer?
Note that 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've shown above.

  
Q. Can I still use the other @font-face typeface "GestaRegular" as well? Can I use both in the same stylesheet?
Just list them together as I've shown in my example. There is no reason you can't declare both. All that @font-face does is instruct the browser to download and make a font-family available. See: http://iliadraznin.com/2009/07/css3-font-face-multiple-weights

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