css添加多个字体文件
时间: 2024-01-04 22:50:05 浏览: 21
在CSS中,可以通过`@font-face`规则来添加多个字体文件。
例如,以下代码会添加两个字体文件:Open Sans Regular和Open Sans Bold。
```css
@font-face {
font-family: 'Open Sans';
src: url('fonts/OpenSans-Regular.ttf') format('truetype'),
url('fonts/OpenSans-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/OpenSans-Bold.ttf') format('truetype'),
url('fonts/OpenSans-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
```
注意,两个字体文件的`font-family`属性值都是相同的,这是因为它们都是Open Sans字体的不同变体。然而,它们的`font-weight`属性值是不同的,一个是normal,一个是bold,以便在需要时应用正确的字体变体。
在使用时,可以像这样指定字体:
```css
body {
font-family: 'Open Sans', sans-serif;
}
```
如果用户的浏览器支持Open Sans字体且已下载了字体文件,则会使用该字体。否则,将使用备用字体(在这种情况下是sans-serif)。