@font-face 如何添加多个字体
时间: 2023-12-25 19:02:37 浏览: 32
要添加多个字体,您可以按照以下步骤操作:
1. 使用@font-face规则声明第一个字体,例如:
```
@font-face {
font-family: 'CustomFont1';
src: url('customfont1.woff2') format('woff2'),
url('customfont1.woff') format('woff');
font-weight: normal;
font-style: normal;
}
```
2. 在同一个样式表中声明另一个字体,例如:
```
@font-face {
font-family: 'CustomFont2';
src: url('customfont2.woff2') format('woff2'),
url('customfont2.woff') format('woff');
font-weight: normal;
font-style: normal;
}
```
3. 在需要使用这些字体的元素上指定字体,例如:
```
h1 {
font-family: 'CustomFont1', 'CustomFont2', sans-serif;
}
```
这将使浏览器尝试使用第一个字体,如果该字体不可用,则尝试使用第二个字体,以此类推。如果所有字体都不可用,则使用浏览器默认字体。
相关问题
可以写2个@font-face
是的,可以写多个@font-face。每个@font-face规则定义了一种字体,可以设置字体的名称、URL和格式等属性。在CSS中,可以定义多个@font-face规则,然后将它们应用到不同的元素上,以实现不同字体效果。例如:
```
@font-face {
font-family: 'MyFont1';
src: url('myfont1.woff2') format('woff2'),
url('myfont1.woff') format('woff');
}
@font-face {
font-family: 'MyFont2';
src: url('myfont2.ttf') format('truetype'),
url('myfont2.woff2') format('woff2'),
url('myfont2.woff') format('woff');
}
h1 {
font-family: 'MyFont1';
}
p {
font-family: 'MyFont2';
}
```
在这个例子中,我们定义了两个@font-face规则,分别用于定义字体“MyFont1”和“MyFont2”。然后,我们将这两个字体应用到不同的元素上,以实现不同的字体效果。
@font-face是什么
`@font-face` 是一个CSS规则,用于在Web页面中引入自定义字体。它允许您将自定义字体文件加载到网页中,以便在页面中使用非标准字体。
通过 `@font-face` 规则,您可以将字体文件(通常是 TrueType 字体文件 `.ttf` 或 OpenType 字体文件 `.otf`)嵌入到网页中,并为其定义一个名称。然后,您可以在CSS中使用该名称来指定元素的字体。
以下是一个示例:
```css
@font-face {
font-family: 'MyCustomFont';
src: url('path/to/font-file.ttf') format('truetype');
}
p {
font-family: 'MyCustomFont', sans-serif;
}
```
在上述代码中,`@font-face` 规则定义了一个自定义字体 `MyCustomFont`,并指定了字体文件的路径和格式。然后,将该字体应用于 `<p>` 元素中,使其显示使用 `MyCustomFont` 字体。
使用 `@font-face` 可以实现更多自定义字体的选择,并使网页具有更丰富的外观和视觉效果。请注意,字体文件需要位于您网页可访问的位置,并遵循版权和许可规定。