如何在CSS中使用@font-face规则引入自定义字体?
时间: 2024-09-11 07:02:48 浏览: 19
在CSS中,`@font-face`规则可以用来定义并使用自定义字体。使用`@font-face`可以让你在网页中使用那些不是默认安装在用户系统上的字体。以下是使用`@font-face`规则引入自定义字体的基本步骤:
1. 首先,你需要拥有或选择一个字体文件。通常这些文件可能是`.woff`、`.woff2`、`.ttf`、`.eot`、`.svg`等格式之一。
2. 然后,在CSS文件中,你可以使用`@font-face`规则定义字体。在这个规则中,你需要提供一个`font-family`名称(这是你在CSS中引用该字体的方式),以及字体文件的路径。例如:
```css
@font-face {
font-family: 'MyCustomFont';
src: url('my-custom-font.woff2') format('woff2'),
url('my-custom-font.woff') format('woff'),
url('my-custom-font.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
```
在上面的例子中,`'MyCustomFont'`是你自定义的字体名称,`src`属性指定了字体文件的位置和格式。建议同时提供多种格式的字体文件,以便浏览器根据支持的情况选择正确的字体文件。
3. 最后,你可以在你的CSS中通过`font-family`属性来使用这个自定义字体了:
```css
body {
font-family: 'MyCustomFont', sans-serif;
}
```
在这个例子中,如果`'MyCustomFont'`不可用,浏览器将回退到使用默认的`sans-serif`字体。