@font-face 是 CSS 中用于定义自定义字体的规则。它允许网页设计者使用不同于用户系统中安装的标准字体的字体。

使用 @font-face 规则时,你需要指定字体文件的路径,并使用 font-family 属性定义字体名称。这样,你就可以通过在样式中使用这个字体名称来应用自定义字体。

下面是一个基本的 @font-face 规则的例子:
@font-face {
  font-family: 'CustomFont';
  src: url('path/to/custom-font.woff2') format('woff2'),
       url('path/to/custom-font.woff') format('woff');
  /* 可以添加更多的字体格式,如 truetype (.ttf)、opentype (.otf) */
  font-weight: normal;
  font-style: normal;
}

这个例子中:

  •  font-family: 定义字体名称,后续可以在样式中使用。

  •  src: 指定字体文件的路径,以及文件格式,以确保浏览器能够正确加载。在这个例子中,提供了 WOFF2 和 WOFF 格式的字体文件路径。

  •  font-weight 和 font-style: 分别定义字体的粗细和风格。这两个属性是可选的。


一旦定义了 @font-face 规则,你就可以在其他样式规则中使用这个自定义字体:
body {
  font-family: 'CustomFont', sans-serif;
}

这样,body 元素及其子元素将使用定义的 CustomFont 字体,如果该字体不可用,则会回退到系统中的 sans-serif 字体。


转载请注明出处:http://www.zyzy.cn/article/detail/6074/CSS