我可以使用單一 @font-face 查詢匯入多個字體粗細嗎？

Querying Multiple Font Weights with @font-face

In the situation where multiple font variations are available with varying weight and styles, such as the Klavika font mentioned, it is natural to inquire if it is possible to consolidate these imports into a single @font-face query to avoid repetitive copying.

The answer lies in a specialized form of @font-face that allows you to define weight within the query itself.

For instance, to import the Klavika family with various weights and styles, you can utilize the following:

@font-face {
  font-family: "Klavika";
  src: url("Klavika-Regular.otf") format("truetype") weight:normal;
  src: url("Klavika-Bold.otf") format("truetype") weight:bold;
  src: url("Klavika-Regular-Italic.otf") format("truetype") weight:normal style:italic;
  src: url("Klavika-Bold-Italic.otf") format("truetype") weight:bold style:italic;
}

This approach grants the ability to specify font-weight or font-style for any element without the need to explicitly declare the font-family or override previously set font weight and style. For example:

body { font-family:"Klavika", Georgia, serif; }

h1 { font-weight:bold; }

em { font-style:italic; }

strong em {
  font-weight:bold;
  font-style:italic;
}

以上是我可以使用單一 @font-face 查詢匯入多個字體粗細嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！