您可以在單一 @font-face 查詢中定義多個字體粗細嗎？

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

Klavika 字體有各種粗細和形狀。可以使用指定粗細的單一 @font-face 查詢將這些匯入到 CSS 中嗎？

解決方案：

引入@font-face 的多功能功能，您可以將不同的樣式和粗細與單一字體系列名稱相關聯：

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");  /* Normal weight, normal style */
  src: url("DroidSerif-Italic-webfont.ttf") format("truetype"); /* Normal weight, italic style */
  src: url("DroidSerif-Bold-webfont.ttf") format("truetype");  /* Bold weight, normal style */
  src: url("DroidSerif-BoldItalic-webfont.ttf") format("truetype"); /* Bold weight, italic style */
}

您現在可以指定font-weight:bold 或font-style:italic對於不同的元素：

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

h1 { font-weight:bold; }

em { font-style:italic; }

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

有關此功能的全面詳細信息，請參閱官方文檔。

範例：

[範例筆](https://codepen.io/anon/pen/EjxVqv)

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