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

Posted 2023-03-15

【中文标题】在 CSS 中使用多个 @font-face 规则

【英文标题】：Use multiple @font-face rules in CSS

【发布时间】：2011-06-19 20:17:07

【问题描述】：

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

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

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 使用不同的字体。我该怎么做？

【参考方案1】：

可以通过更改@font-face 规则的 font-weight 和 src 属性来声明字体系列的多个变体。

/* Regular Weight */
@font-face 
    font-family: Montserrat;
    src: url("../fonts/Montserrat-Regular.ttf");


/* SemiBold (600) Weight */
@font-face 
    font-family: Montserrat;
    src: url("../fonts/Montserrat-SemiBold.ttf");
    font-weight: 600;


/* Bold Weight */
@font-face 
    font-family: Montserrat;
    src: url("../fonts/Montserrat-Bold.ttf");
    font-weight: bold;

声明的规则可以通过以下方式使用

/* Regular */
font-family: Montserrat;


/* Semi Bold */
font-family: Montserrat;
font-weght: 600;

/* Bold */
font-family: Montserrat;
font-weight: bold;

【参考方案2】：

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

【参考方案3】：

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

Custom web font not working in 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(../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;

---

还有你的后续问题：

Q.我想使用诸如“Bumble bee”之类的字体。如何使用@font-face 使该字体在用户的 电脑？

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

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

只需将它们列在一起，就像我在示例中展示的那样。没有理由不能同时声明两者。 @font-face 所做的只是指示浏览器下载并提供字体系列。见：http://iliadraznin.com/2009/07/css3-font-face-multiple-weights