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

Question

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

此？

get()

还是这个？

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

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

为什么？ 我使用第二个，因为我可以将字体系列添加到BODY，只需将font-style或font-weight添加到其他类。它有效。

但我看到人们多次使用第一种方法。但在我看来太粗鲁了。 每次你需要为一个类添加粗体时你必须使用＆＃34; font-family：DeliciousRomanRegular，Arial，sans-serif;＆＃34;。 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;
}

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