如何使用@font-face 规则将多个字体系列添加到我的样式表中？答案

【问题标题】：How do add multiple font-family to my style sheet using @font-face rule?如何使用@font-face 规则将多个字体系列添加到我的样式表中？
【发布时间】：2018-03-12 19:50:22
【问题描述】：

如何使用@font-face 将多个字体系列添加到我的样式表中？示例仅显示单个字体系列添加，例如，

@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}

第二个字体系列怎么样，比如 mySecondFont？

【问题讨论】：

标签： css html fonts font-family

【解决方案1】：

来自this article...

您还可以为字体定义特定属性。属性您可以设置的是字体样式、字体变体、字体粗细和字体拉伸。这对于使用多种变体特别有用同名字体。

因此，您只需为所有字体源文件使用相同的 font-family 值，并确保为每个源文件声明不同的样式属性。

示例（来自文章）：

@font-face {
  font-family: Lato;
  src: local("Lato"),
       url(/assets/fonts/Lato.woff2) format('woff2'),
       url(/assets/fonts/Lato.woff) format('woff');
}
@font-face {
  font-family: Lato;
  src: url(/assets/fonts/Lato-LightItalic.woff2) format('woff2'),
       url(/assets/fonts/Lato-LightItalic.woff) format('woff');
 font-weight: 200;
 font-style: italic;
}

【讨论】：

【解决方案2】：

您始终可以在以font-family 名称提供的 CSS 中添加多个 @fontface。

@font-face {
    font-family: myFirstFont;
    src: url(myFirstFont.woff);
    font-weight: bold;
}

@font-face {
    font-family: mySecondFont;
    src: url(mySecondFont.woff);
    font-weight: bold;
}

【讨论】：