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

优化字体声明：使用单个 @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' 定义字体系列name.
• 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)。

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