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

最佳化字體宣告：使用單一@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' 定義字型系列name.
• 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)。

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