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

问题描述

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

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

这目前仅适用于网站上的整个正文.但是，我想指定 h1 使用不同的字体.我该怎么做?

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:

自定义网页字体在 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;
}

<小时>

以及您的后续问题:

---

And your follow-up questions:

问.我想使用诸如Bumble bee"之类的字体.我如何使用 @font-face 使该字体在用户的电脑?

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?

请注意，我不知道您的 Bumble Bee 字体或文件的名称是什么，因此请进行相应调整，并且字体声明应在您使用它之前(先于)，如我上面所示.

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.

问我还能使用其他 @font-face 字体GestaRegular"吗?我可以在同一个样式表中使用它们吗?

Q. Can I still use the other @font-face typeface "GestaRegular" as well? Can I use both in the same stylesheet?

就像我在我的例子中展示的那样将它们一起列出.没有理由您不能同时声明两者.@font-face 所做的就是指示浏览器下载字体系列并使其可用.请参阅:http://iliadraznin.com/2009/07/css3-font-face-multiple-weights

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屋！