@font-face CSS

介绍

@font-face 是 CSS 的一个规则，用于在网页中引入自定义字体。传统上，在网页上只能使用系统默认的字体，而 @font-face 则允许开发者使用自己的字体文件在网页中显示特定的字体样式。

语法

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

@font-face {
  font-family: 字体名称;
  src: 字体资源的路径;
  font-weight: 字体的粗细程度;
  font-style: 字体的样式（斜体、正常等）;
}

属性

• font-family：指定字体的名称，用于在其他 CSS 规则中引用该字体。
• src：指定字体文件的路径。可以是本地路径或远程 URL。
• font-weight：可选属性，用于指定字体的粗细程度。常见的值有 normal（默认字体）、bold（粗体）等。
• font-style：可选属性，用于指定字体的样式。常见的值有 normal（正常样式）、italic（斜体）等。

使用示例

以下示例演示了如何使用 @font-face 导入并应用自定义字体：

@font-face {
  font-family: 'MyCustomFont';
  src: url('path/to/font.woff');
  font-weight: normal;
  font-style: normal;
}

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

以上代码中，自定义字体文件 path/to/font.woff 将被导入并命名为 'MyCustomFont'。然后，可以在其他 CSS 规则中通过 font-family 属性引用该字体，如上述示例中的 body 元素。

注意事项

• 使用自定义字体时需要确保字体文件能够被正确加载。建议使用通用的字体格式（如 .woff, .woff2, .ttf, .otf）以兼容不同浏览器。
• 尽量提供多个字体文件格式的引用，以便支持更广泛的浏览器兼容性。
• 如果字体文件位于服务器上，需要确保在 CSS 文件中使用正确的相对路径或绝对 URL 来引用字体文件。

结论

@font-face 是一个非常有用的 CSS 规则，可以方便地在网页中使用自定义字体。通过引入自定义字体，开发者可以提供独特的字体样式，为网页增加个性化和美观性。