@font-face 如何添加多个字体

要添加多个字体，您可以按照以下步骤操作：

1. 使用@font-face规则声明第一个字体，例如：

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

2. 在同一个样式表中声明另一个字体，例如：

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

3. 在需要使用这些字体的元素上指定字体，例如：

h1 {
  font-family: 'CustomFont1', 'CustomFont2', sans-serif;
}

这将使浏览器尝试使用第一个字体，如果该字体不可用，则尝试使用第二个字体，以此类推。如果所有字体都不可用，则使用浏览器默认字体。

相关问题

使用@font-face规则引入自定义字体如何引用

`@font-face`规则是在CSS中用来引入自定义字体的一种机制。如果你想在网页上使用非标准的或者特殊的字体，就需要通过这个规则将其添加到你的项目中。以下是使用`@font-face`的基本步骤：

1. **定义字体**: 首先，在`.css`文件中编写`@font-face`声明，指定字体的名称、源（通常是URL指向字体文件）、格式（如.TTF、.WOFF、.EOT或.otf）、以及其他可能的特性，例如图标字体的字符集：

@font-face {
  font-family: 'CustomFont'; /* 自定义字体名 */
  src: url('path/to/font.ttf') format('truetype'); /* 这里是字体文件路径 */
  /* 可选：如果还有其他格式，可以添加多个src属性 */
}

2. **使用字体**: 之后，在你想要应用字体的地方，你可以像引用任何CSS字体一样使用它，比如`font-family`属性：

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

这里，`CustomFont`是你之前定义的名字，如果用户设备上没有这个字体，会退回到`Arial`或其他备选字体。

3. **注意事项**:
- 路径通常是指相对路径或绝对路径，确保访问者可以从服务器上获取到字体文件。
- 为了提高性能，最好合并和压缩所有字体文件，或使用现代字体加载策略（如按需加载）。

记得在生产环境中，确保你的服务器提供了正确的MIME类型，以便浏览器能够正确识别并下载字体。

@font-face是什么

`@font-face` 是一个CSS规则，用于在Web页面中引入自定义字体。它允许您将自定义字体文件加载到网页中，以便在页面中使用非标准字体。

通过 `@font-face` 规则，您可以将字体文件（通常是 TrueType 字体文件 `.ttf` 或 OpenType 字体文件 `.otf`）嵌入到网页中，并为其定义一个名称。然后，您可以在CSS中使用该名称来指定元素的字体。

以下是一个示例：

@font-face {
  font-family: 'MyCustomFont';
  src: url('path/to/font-file.ttf') format('truetype');
}

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

在上述代码中，`@font-face` 规则定义了一个自定义字体 `MyCustomFont`，并指定了字体文件的路径和格式。然后，将该字体应用于 `<p>` 元素中，使其显示使用 `MyCustomFont` 字体。

使用 `@font-face` 可以实现更多自定义字体的选择，并使网页具有更丰富的外观和视觉效果。请注意，字体文件需要位于您网页可访问的位置，并遵循版权和许可规定。