CSS3 自定义字体的常识与使用

在CSS3中，我们可以使用@font-face规则来定义自定义字体，并在样式中使用它们。以下是如何使用自定义字体的步骤和示例代码：

1. 准备字体文件：将字体文件（如.ttf, .otf, .woff, .woff2）放在网站服务器上的某个目录中。
2. 使用@font-face规则：在CSS文件中定义字体。
3. 应用字体：在CSS中使用定义的字体。

示例代码：

@font-face {
  font-family: 'MyCustomFont';
  src: url('path/to/fontfile.woff2') format('woff2'),
       url('path/to/fontfile.woff') format('woff'),
       url('path/to/fontfile.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 在字体下载过程中使用系统字体，提升性能 */
}
 
body {
  font-family: 'MyCustomFont', sans-serif;
}

在这个例子中，我们首先定义了一个名为MyCustomFont的自定义字体，并指定了三种不同格式的字体文件路径。然后，在body选择器中使用了这个自定义字体，并将它和无衬线字体作为后备字体。使用font-display: swap可以在自定义字体加载过程中使用系统字体，提升用户体验。