Html 在 CSS 中使用多个 @font-face 规则
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4872592/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use multiple @font-face rules in CSS
提问by Tim
How can I use more than @font-facerule in my CSS?
如何@font-face在我的 CSS 中使用 more than rule？
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 h1to use a different font. How can I do this?
这目前仅适用于网站上的整个文本正文。但是，我想指定h1使用不同的字体。我怎样才能做到这一点？
回答by Jared Farrish
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).
其中包括您在下面看到的 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(../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-faceto make that font available on the user's computer?
问：例如，我想使用诸如“Bumble bee”之类的字体。如何使用
@font-face该字体在用户的计算机上可用？
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.
请注意，我不知道您的 Bumble Bee 字体或文件的名称是什么，因此请相应地进行调整，并且字体声明应在您使用它之前（先于），如我上面所示。
Q.Can I still use the other
@font-facetypeface "GestaRegular" as well? Can I use both in the same stylesheet?
问：我还可以使用其他
@font-face字体“GestaRegular”吗？我可以在同一个样式表中使用它们吗？
Just list them together as I've shown in my example. There is no reason you can't declare both. All that @font-facedoes is instruct the browser to download and make a font-family available. See: http://iliadraznin.com/2009/07/css3-font-face-multiple-weights
就像我在我的例子中展示的那样将它们一起列出。没有理由不能同时申报。所有这一切@font-face确实是指示浏览器下载，并作出FONT-FAMILY可用。见：http: //iliadraznin.com/2009/07/css3-font-face-multiple-weights
回答by Surya R Praveen
@font-face {
font-family: Kaffeesatz;
src: url(YanoneKaffeesatz-Thin.otf);
font-weight: 200;
}
@font-face {
font-family: Kaffeesatz;
src: url(YanoneKaffeesatz-Light.otf);
font-weight: 300;
}
@font-face {
font-family: Kaffeesatz;
src: url(YanoneKaffeesatz-Regular.otf);
font-weight: normal;
}
@font-face {
font-family: Kaffeesatz;
src: url(YanoneKaffeesatz-Bold.otf);
font-weight: bold;
}
h3, h4, h5, h6 {
font-size:2em;
margin:0;
padding:0;
font-family:Kaffeesatz;
font-weight:normal;
}
h6 { font-weight:200; }
h5 { font-weight:300; }
h4 { font-weight:normal; }
h3 { font-weight:bold; }
