re:从0开始的CSS学习之路 6. 字体相关属性

扶摇|2024-02-12 8:20

1. 字体相关属性

font-size 字体大小
font-family 字体的系列（字体簇）

可以设置多个字体，每个字体之间以逗号隔开

设置多个字体的目的是为了用户尽可能的支持字体

网页字体的五大类：
serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体
cursive 草书字体
fantasy 虚幻字体

若字体名称中包含空格，则必须使用双引号
font-weight 字体的粗细

可选值：
normal 正常显示（默认值）
bold 粗体
lighter 特细
bolder 特粗
"number" 利用数值指定粗细 100-900，值后没有单位

400相当于normal 700相当于bold
font-style 字体的样式

可选值：
normal 正常显示
italic 斜体

（通常斜体使用相对较少，反而将斜体设置成normal）

字体的简写属性：font，使用一个font属性设置所有的相关属性
font:font-style font-weight font-size/line-height font-family

注意：

每个属性之间以空格隔开
font-size font-family 不可以省略并且必须按照顺序书写，其他可以省略

示例如下：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	h1 {
		font-size: 80px;
		font-family: monospace;
	}
	
	p {
		/* font-size: 30px;
		font-family: serif;
		font-weight: bolder;
		font-style: italic; */
		font: italic bolder 80px serif;
	}
</head>

<body>
	<h1>天天好心情 I'M happy</h1>
	<p>今天天气不错</p>
	<p>挺风和日丽的</p>
	<p>我们今天在上课</p>
	<p>我心情挺好的</p>
</body>

</html>