如何使用 @font-face 规则向我的样式 sheet 添加多个字体系列？

Question

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

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

第二个字体系列说 mySecondFont 怎么样？

Answer 1

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

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

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

Answer 2

从this article...

you can also define specific properties for the font. The properties that you can set are font-style, font-variant, font-weight & font-stretch. This is helpful especially to use multiple variations of a font under the same name.

所以您只需为所有字体源文件使用相同的 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;
}

如何使用 @font-face 规则向我的样式 sheet 添加多个字体系列？

How do add multiple font-family to my style sheet using @font-face rule?

html

css

fonts

font-family