優化字型聲明：使用單一@font-face 查詢匯入多個字型粗細

在字型系列包含多種變體的情況下粗細和樣式，使用單獨的@font-face 查詢單獨匯入每個變體可能會變得乏味。本文探討了將這些查詢合併到單一聲明中的可能性。

挑戰：導入多個字體粗細

考慮一種場景，其中Klavika 字體可用於多種版本重量和尺寸：

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 查詢將這些變體匯入 CSS 中。這樣就無需多次複製和貼上查詢。

解決方案：利用擴展@font-face語法

幸運的是，@font-face提供了擴展允許將不同粗細和样式值分配給單個字體系列的語法：

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

在此範例中：

• font-family: 'Klavika' 定義字型系列名稱。
• src: url(..)，後面跟著對應的粗細，指定常規和粗體變體的來源檔。

合併字型查詢的好處

合併字型查詢有幾個好處：

• 減少程式碼重複： 避免對每個粗細變化進行重複的@font-face查詢。
• 提高可讀性：保持CSS程式碼的組織和簡潔.
• 更容易維護：可以在單一位置更改字體粗細。

其他資源

有關此功能及其標準用法的全面概述，請參閱以下文章：[擴展@font-face語法](https: //developer.mozilla.org/en-US/docs/Web/CSS/@font -face.

範例筆

在以下範例筆中查看此技術的現場示範：[使用單一@font-face 查詢實作多個字型粗細]( https://codepen.io/anon/pen/abvaqP).