html - 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;
}

为什么？ 我使用第二个，因为我可以将 font-family 添加到 BODY，而只需将 font-style 或 font-weight 添加到其他类。并且有效。

但是我看到很多人使用第一种方法。但在我看来太粗鲁了。 每次需要为类添加粗体时，都必须使用“font-family: DeliciousRomanRegular, Arial, sans-serif;”。什么鬼？

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

一切都会正常进行。将此与“改变字体系列只是因为你想要相同的字体，但斜体”的荒谬概念形成对比。我们不要那样做。