CSS 多个字重，一个 @font-face 查询

在本文中，我们将介绍如何在CSS中使用多个字重以及在一个@font-face查询中设置字体。

阅读更多：CSS 教程

@font-face 查询

在CSS中，@font-face查询用于定义字体，以便在网页上使用。通过定义字体文件的路径和属性，网页可以加载和显示指定的字体。

一个基本的@font-face查询通常包括字体的名称、字体文件的路径和文件格式。例如：

@font-face {
  font-family: 'myFont';
  src: url('myFont.woff2') format('woff2'),
       url('myFont.woff') format('woff');
}

这样，网页就可以使用font-family: 'myFont';来引用这个字体。

多个字重

使用不同字重的字体可以为文本增加视觉效果，并突出显示特定的信息。CSS提供了font-weight属性，用于指定字体的粗细。

常用的font-weight值包括：常规（normal）、粗体（bold）、更细（lighter）和更粗（bolder）。此外，还可以使用数字值来设置字体的具体粗细程度，例如font-weight: 500;。

在@font-face查询中，我们可以使用多个字重来定义相同的字体。例如，我们可以定义一个字体并指定多个字重，如下所示：

@font-face {
  font-family: 'myFont';
  src: url('myFont-Regular.woff2') format('woff2'),
       url('myFont-Regular.woff') format('woff');
  font-weight: normal;
}

@font-face {
  font-family: 'myFont';
  src: url('myFont-Bold.woff2') format('woff2'),
       url('myFont-Bold.woff') format('woff');
  font-weight: bold;
}

@font-face {
  font-family: 'myFont';
  src: url('myFont-Light.woff2') format('woff2'),
       url('myFont-Light.woff') format('woff');
  font-weight: lighter;
}

在这个例子中，我们定义了一个名为myFont的字体，并为它分别指定了常规、粗体和更细的字重。这样，当我们在样式中使用font-weight: normal;时，页面将加载并使用myFont-Regular字体；当使用font-weight: bold;时，页面将加载并使用myFont-Bold字体；当使用font-weight: lighter;时，页面将加载并使用myFont-Light字体。

这样，我们可以根据需要选择和应用不同的字重，以达到更好的视觉效果。

示例说明

接下来，让我们通过一个示例来演示如何使用多个字重和@font-face查询。

假设我们有以下HTML代码：

<p class="normal-weight">这是使用常规字重的文本。</p>
<p class="bold-weight">这是使用粗体字重的文本。</p>
<p class="light-weight">这是使用更细字重的文本。</p>

我们希望为这三个段落分别应用不同的字重。

首先，我们需要将字体文件（.woff或.woff2格式）放置在适当的路径下，并更新@font-face查询中的字体文件路径。

然后，在CSS中定义这三个类选择器并将适当的字重应用到文本中：

.normal-weight {
  font-weight: normal;
  font-family: 'myFont';
}

.bold-weight {
  font-weight: bold;
  font-family: 'myFont';
}

.light-weight {
  font-weight: lighter;
  font-family: 'myFont';
}

这样，当我们查看网页时，每个段落的文本将使用相应的字重。