在 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 添加到其他 classes。并且有效。

但是我看到很多人使用第一种方法。但在我看来太粗鲁了。每次需要为 class 添加粗体时，您都必须使用 "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;
}

一切都会正常进行。将此与 "changing the font family just because you wanted the same font, but italic" 的荒谬概念进行对比。我们不要那样做。

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

The right way to include multiple fonts in css

html

css

fonts

font-face