CSS 中的 @font-face 规则

在 CSS 中，@font-face 规则用于定义自定义字体，使网页能够显示非系统默认的字体。

语法

使用 @font-face 规则的语法如下所示：

@font-face {
  font-family: 字体名称;  /* 定义字体的名称 */
  src: 字体文件的路径;     /* 定义字体文件的路径 */
  font-weight: 字体粗细;  /* 定义字体的粗细 */
  font-style: 字体样式;    /* 定义字体的样式（normal, italic, oblique） */
}

说明

• font-family: 定义字体的名称，这个名称将在 CSS 中被引用。
• src: 定义字体文件的路径，可以是相对路径或者绝对路径。常见的字体文件格式有 TrueType(.ttf)、OpenType(.otf)、Web Open Font Format(.woff/.woff2)。
• font-weight: 定义字体的粗细。可选值包括 normal, bold, bolder, lighter 或者具体的数值。
• font-style: 定义字体的样式。可选值包括 normal, italic 或者 oblique。

使用 @font-face 规则

使用 @font-face 规则步骤如下：

1. 将字体文件(.ttf, .otf, .woff, .woff2 等)保存到合适的位置，确保可以通过路径访问到这些文件。
2. 在 CSS 中使用 @font-face 规则定义字体。
3. 通过 font-family 属性将定义的字体应用到需要使用的元素上。

例如，假设有一个名为 "MyFont" 的自定义字体文件，以下是一个使用 @font-face 规则的示例：

@font-face {
  font-family: MyFont;
  src: url('路径/MyFont.ttf');
  font-weight: bold;
  font-style: italic;
}

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

上述示例中，定义了一个名为 "MyFont" 的自定义字体，它是一个加粗斜体字体。然后，将这个字体应用到 body 元素上。

注意事项

• 当使用自定义字体时，确保字体文件可以通过 CSS 中指定的路径正确加载。
• 确保在字体文件路径中遵循正确的文件后缀名和大小写。
• 浏览器支持性可能在不同的字体格式和操作系统环境下有所不同，需要进行测试和兼容性处理。

更多关于 @font-face 规则的详细信息，请参考 MDN 文档。