CSS3 @font-face 规则

在网页开发中，@font-face 是一个非常有用的 CSS 属性，它允许开发者使用自定义字体来美化网页内容。通过 @font-face，开发者可以引入任何字体文件，并在网页中使用这些字体。

语法

@font-face 的语法如下所示：

@font-face {
  font-family: <font-family-name>;
  src: <font-url>;
}

• font-family：指定自定义字体的名称，用于在样式中引用该字体。
• src：指定字体文件的路径，可以是本地文件路径或者网络路径。

示例

下面是一个 @font-face 的示例代码：

@font-face {
  font-family: 'CustomFont';
  src: url('customfont.woff2') format('woff2'),
       url('customfont.woff') format('woff');
}

在上面的示例中，我们定义了一个名为 CustomFont 的自定义字体，并引入了两种不同格式的字体文件。

使用

使用 @font-face 定义的字体非常简单，只需要在样式中指定对应的 font-family 即可：

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

在上面的代码中，我们将 CustomFont 这个自定义字体应用到了整个页面的 body 元素上。

@font-face 属性为开发者提供了更多自定义字体的可能性，让网页内容更加丰富多彩。