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

使用單一 @font-face 查詢匯入多個字體粗細

在 CSS 中，@font-face 規則用於將自訂字體匯入網頁。但是，匯入具有多種粗細的字型可能需要多次查詢。本文探討了透過單一查詢匯入多個字體粗細的可能性。

問題

考慮Klavika 字體，它有8 種不同的形狀和大小：

Klavika-Bold-Italic.otf
Klavika-Bold.otf
Klavika-Light-Italic.otf
Klavika-Light.otf
Klavika-Medium-Italic.otf
Klavika-Medium.otf
Klavika-Regular-Italic.otf
Klavika-Regular.otf

目標是透過單一@font-face ，定義查詢中的權重

解

@font-face {
  font-family: 'Klavika';
  src: url(../fonts/Klavika-Regular.otf), weight:normal;
  src: url(../fonts/Klavika-Bold.otf), weight:bold;
}

要實現此目的，可以使用@font-face 的特殊風格：

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

這種方法關聯不同的樣式和粗細使用相同字體系列名稱的不同字體。

用法

現在，您可以為任何元素指定font-weight 或font-style ，而無需指定字體系列或覆蓋現有設定：

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

h1 { font-weight:bold; }

em { font-style:italic; }

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

結論

使用此技術，可以匯入多種字體在CSS 中使用單一@font-face 查詢來計算權重，簡化了流程並提高了程式碼效率。

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