优化字体声明：使用单个 @font-face 查询导入多个字体粗细

在字体系列包含多种变体的情况下粗细和样式，使用单独的 @font-face 查询单独导入每个变体可能会变得乏味。本文探讨了将这些查询合并到单个声明中的可能性。

挑战：导入多个字体粗细

考虑一种场景，其中 Klavika 字体可用于多种版本重量和尺寸：

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-face提供了扩展允许将不同粗细和样式值分配给单个字体系列的语法：

@font-face {
  font-family: 'Klavika';
  src: url(../fonts/Klavika-Regular.otf), weight: normal;
  src: url(../fonts/Klavika-Bold.otf), weight: bold;
}

在此示例中：

• font-family: 'Klavika' 定义字体系列名称。
• src: url(..)，后跟相应的粗细，指定常规和粗体变体的源文件。

统一字体的优点查询

合并字体查询有几个好处：

• 减少代码重复：避免对每个粗细变化重复@font-face查询。
• 提高可读性： 保持 CSS 代码井井有条，简洁。
• 更容易维护：可以在单个位置更改字体粗细。

其他资源

有关此功能及其标准用法的全面概述，请参阅以下文章：[扩展@font-face语法](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face.

示例笔

参见在以下示例笔中现场演示了该技术：[使用单个 @font-face 的多个字体粗细查询](https://codepen.io/anon/pen/abvaqP).