可以使用單一 @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;
}

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

範例：

[Example Pen](https://codepen .io/anon/pen/EjxVqv)