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