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

一切都會正常進行。 將此與“僅因為您想要相同的字體但斜體而更改字體系列”這一荒謬的概念相對照。 我們不要那樣做。