如何在 CSS 中使用网页字体？

当你需要在网页中使用特定的字体时，可以使用CSS来加载和使用字体。

1. 下载字体文件

首先，你需要找到想要使用的字体文件并下载它。常见的字体格式包括：

• TrueType (.ttf)
• OpenType (.otf)
• Web Open Font Format (.woff)
• Web Open Font Format 2.0 (.woff2)

下载完字体文件后，将其存储在你的项目文件夹中。

2. 导入字体

接下来，在CSS中使用@font-face规则来导入字体。这个规则指定了字体文件的名称、文件路径、格式以及字体系列的名称。

下面是一个例子：

@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.ttf') format('truetype');
}

在这个例子中，font-family属性指定了字体系列的名称为“MyCustomFont”，src属性指定了字体文件的路径和格式。

3. 设置字体

通过将 font-family属性设为MyCustomFont，就可以将你想要的字体应用到任意元素上。

下面是一个例子：

body {
  font-family: 'MyCustomFont', sans-serif;
}

在这个例子中，当字体“MyCustomFont”无法加载时，使用默认字体“sans-serif”。

4. 完整代码片段

下面是一个完整的代码片段，包括了导入字体并应用到元素上：

@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.ttf') format('truetype');
}

body {
  font-family: 'MyCustomFont', sans-serif;
}

现在你已经知道如何在CSS中加载和应用自定义字体了。记得在将自定义字体应用到网站时，要确保该字体是免费授权或已获得合法授权。