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

使用@font-face 查詢多個字體粗細

在有多種不同粗細和样式的字體變體的情況下，例如提到Klavika 字體，很自然地會詢問是否可以將這些匯入合併到單一@font-face 查詢中以避免重複複製。

答案在於 @font-face 的特殊形式，讓您在查詢本身中定義權重。

例如，要匯入具有各種重量和樣式的Klavika 系列，您可以利用以下方法：

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

此方法授予以下功能為任何元素指定字體粗細或字體樣式，無需明確聲明字體系列或覆蓋先前設定的字體粗細和樣式。例如：

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中文網其他相關文章！