CSS 如何在font-face字体中使用font-weight

在本文中，我们将介绍如何在使用font-face加载的自定义字体中设置字体加粗（font-weight）属性。

阅读更多：CSS 教程

基本概念

在CSS中，font-weight属性用于设置字体的粗细程度。常见的取值有：normal（默认），bold（加粗），lighter（细体），数字（范围从100到900）等。

而font-face是CSS中用于加载自定义字体的规则。通过font-face规则，我们可以引入并使用网站中没有预装的字体。

如何在font-face字体中使用font-weight？

当我们使用font-face加载自定义字体时，默认情况下只有normal（400）和bold（700）这两个字重（font-weight）可用。

如果我们希望使用其他字重，就需要在字体文件中包含对应字重的字形（glyphs）信息。具体操作如下：

准备字体文件
首先，我们需要准备包含各个字重的字体文件。通常，我们可以使用字体工具如FontForge或Glyphs进行字体编辑和转换。

对于每个字重，我们需要将字形信息导出为对应的字体文件格式（如TTF、OTF、WOFF等）。确保每个字重的字体文件具有相同的字体名称（font-family）和字体文件名。
使用font-face定义自定义字体

在CSS中，使用font-face规则来定义自定义字体。示例代码如下：
```
@font-face {
 font-family: 'CustomFont';
 src: url('custom-font.ttf') format('truetype');
 font-weight: 300;
}
```
在上面的示例中，我们定义了一个字体名为’CustomFont’的自定义字体，并指定了字体文件的路径。我们还通过font-weight属性设置了字体的加粗程度为300。

类似地，我们可以为其他字重的自定义字体进行定义。
设置字体样式

通过定义字体样式，我们可以在网页中使用自定义字体，并设置字重。示例代码如下：
```
body {
 font-family: 'CustomFont', sans-serif;
 font-weight: 300;
}
```
在上面的示例中，我们将自定义字体’CustomFont’设置为body元素的字体，并将字体加粗（font-weight）设置为300。

类似地，我们可以通过设置不同的字重值，来使用其他自定义字体。

示例

假设我们有一个包含不同字重字体的字体文件集合，分别是’CustomFont-Light.ttf’（字重300）、’CustomFont-Regular.ttf’（字重400）和’CustomFont-Bold.ttf’（字重700）。

我们可以按照上述步骤定义自定义字体，在网页中使用它们。示例代码如下：

@font-face {
  font-family: 'CustomFont-Light';
  src: url('CustomFont-Light.ttf') format('truetype');
  font-weight: 300;
}

@font-face {
  font-family: 'CustomFont-Regular';
  src: url('CustomFont-Regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'CustomFont-Bold';
  src: url('CustomFont-Bold.ttf') format('truetype');
  font-weight: 700;
}

body {
  font-family: 'CustomFont-Light', sans-serif;
  font-weight: 300;
}

h1 {
  font-family: 'CustomFont-Bold', sans-serif;
  font-weight: 700;
}

p {
  font-family: 'CustomFont-Regular', sans-serif;
  font-weight: 400;
}

在上面的示例中，我们定义了三个字重的自定义字体，并在body、h1和p元素中使用它们。