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

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

在 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查询将这些字体导入CSS，并在查询本身中定义权重。

解决方案

@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中文网其他相关文章！