1. 字体相关属性
-
font-size字体大小 -
font-family字体的系列(字体簇)可以设置多个字体,每个字体之间以逗号隔开
设置多个字体的目的是为了用户尽可能的支持字体
网页字体的五大类:
serif衬线字体
sans-serif非衬线字体
monospace等宽字体
cursive草书字体
fantasy虚幻字体若字体名称中包含空格,则必须使用双引号
-
font-weight字体的粗细可选值:
normal正常显示(默认值)
bold粗体
lighter特细
bolder特粗
"number"利用数值指定粗细 100-900,值后没有单位400相当于
normal700相当于bold -
font-style字体的样式可选值:
normal正常显示
italic斜体(通常斜体使用相对较少,反而将斜体设置成normal)
字体的简写属性:font,使用一个font属性设置所有的相关属性
font:font-style font-weight font-size/line-height font-family
注意:
- 每个属性之间以空格隔开
font-sizefont-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>