在CSS中包含多种字体的正确方法

Question

我不是一个简单的时刻。 在CSS中包含多种字体的正确方法是哪一种？ 这是简单的例子。

这个？

@font-face {
font-family: DeliciousRomanRegular;
src: url(/Delicious-Roman-R.otf);
}

@font-face {
font-family: DeliciousRomanBold;
src: url(/Delicious-Roman-B.otf);
}

或这个？

@font-face {
font-family: Roman;
src: url(/Delicious-Roman-R.otf);
font-style: normal;
font-weight: normal;
}

@font-face {
font-family: Roman;
src: url(/Delicious-Roman-B.otf);
font-style: normal;
font-weight: bold;
}

又为什么呢？ 我使用第二个，因为我可以将字体家族添​​加到BODY中，而只需将字体样式或字体粗细添加到其他类中。 而且有效。

但是我看到人们多次使用第一种方法。 但是在我看来，这太不礼貌了。 每次需要在类中添加粗体时，都必须使用“字体家族：DeliciousRomanRegular，Arial，无衬线；”。 WTF？

Answer 1

第二种选择：使用相同的字体名称，但是对于要使用的每个变体，您需要指定（a）变体和（b）用作字体的替代资源。

这样可以确保在您的实际内容CSS中您可以执行以下操作：

p {
  font-family: Roman;
  font-style: regular;
  font-weight: 400;
}

p em {
  font-style: italic;
}

p strong {
  font-weight: 800;
}

一切都会正常进行。 将此与“仅因为您想要相同的字体但斜体而更改字体系列”这一荒谬的概念相对照。 我们不要那样做。