我可以使用单个 @font-face 查询导入多个字体粗细吗？

使用 @font-face 查询多个字体粗细

在有多种不同粗细和样式的字体变体的情况下，例如提到的 Klavika 字体，很自然地会询问是否可以将这些导入合并到单个 @font-face 查询中以避免重复复制。

答案在于 @font-face 的特殊形式，它允许您在查询本身中定义粗细。

例如，导入具有各种粗细和样式的 Klavika 系列，您可以利用以下内容：

@font-face {
  font-family: "Klavika";
  src: url("Klavika-Regular.otf") format("truetype") weight:normal;
  src: url("Klavika-Bold.otf") format("truetype") weight:bold;
  src: url("Klavika-Regular-Italic.otf") format("truetype") weight:normal style:italic;
  src: url("Klavika-Bold-Italic.otf") format("truetype") weight:bold style:italic;
}

此方法授予为任何元素指定 font-weight 或 font-style 的能力，而无需显式声明font-family 或覆盖之前设置的字体粗细和样式。例如：

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

h1 { font-weight:bold; }

em { font-style:italic; }

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

以上是我可以使用单个 @font-face 查询导入多个字体粗细吗？的详细内容。更多信息请关注PHP中文网其他相关文章！