font-family
font-family属性用于指定元素的字体系列。每个元素可以有一个或多个字体系列,以备用。当指定多个字体系列时,浏览器会按照优先级逐个尝试每个字体系列,直到找到一个可用的字体为止。
语法:
```css
selector {
font-family: value1
value2
...;
}
```
value值可以是以下类型之一:
- 一个具体字体名称(如"Arial"):指定使用该字体名称。
- 一系列具体字体名称的列表,可以按照优先级的顺序排列(如"Arial
Helvetica
sans-serif")。
- 通用字体类别(如"serif"、"sans-serif"、"monospace"、"cursive"、"fantasy"):浏览器会根据用户的字体设置、操作系统和可用字体选择合适的具体字体名称。
当使用具体字体名称时,建议提供多个备用字体系列,以防某个字体在用户的系统中不可用。此外,还可以使用通用字体类别作为备用字体系列,以增加字体显示的兼容性。
以下是一些常见的font-family属性值的示例:
- "Arial
Helvetica
sans-serif":依次尝试使用Arial、Helvetica和浏览器默认的无衬线字体。
- "Times New Roman
Times
serif":依次尝试使用Times New Roman、Times和浏览器默认的衬线字体。
- "Courier New
Courier
monospace":依次尝试使用Courier New、Courier和浏览器默认的等宽字体。
font-family属性不仅可以应用于整个文档的body元素,还可以应用于任何其他元素,以覆盖继承的字体定义。
注意:
- 字体名称区分大小写,因此"Arial"与"arial"是不同的。
- 使用逗号分隔多个字体系列时,如果字体系列名称包含空格或特殊字符,需要使用引号将其括起来(如"'Times New Roman'
Times
serif")。
在设计网页时,我们通常会为文本设置合适的字体样式,以提高用户体验和排版效果。使用font-family属性可以确保在不同浏览器和操作系统中,文本以一致的、可读的方式显示。