@font-face 规则是 CSS 中用于定义自定义字体的规则。它允许网页设计者使用自定义字体，而不仅限于用户计算机上已安装的字体。通过 @font-face 规则，你可以指定字体文件的来源并为其定义一个名字，然后在样式中使用这个名字来引用该字体。

以下是 @font-face 规则的基本语法：
@font-face {
  font-family: 'FontName'; /* 为字体定义一个名称 */
  src: url('fontfile.woff2') format('woff2'); /* 字体文件的路径和格式 */
  /* 可选：定义字体的其他属性，如字体样式、粗细等 */
}

  •  font-family：为字体定义一个名称，以便在样式中引用。

  •  src：指定字体文件的路径和格式。可以使用多个 src 来提供备用字体文件，浏览器会按照顺序查找并使用第一个可用的字体文件。


以下是一个具体的例子：
@font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

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

在这个例子中，@font-face 规则定义了一个名为 'MyCustomFont' 的自定义字体，该字体有两个来源，分别是 myfont.woff2 和 myfont.woff。然后，在 body 元素的样式中，使用了这个自定义字体。

使用 @font-face 规则可以让你在网页中使用不同于用户系统上安装字体的自定义字体，为设计师提供更大的自由度。这特别有助于确保特定字体在不同设备上的一致性。


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