1.font-size 字体大小 常用像素px。
相对长度大小 | 说明 |
em | 相对于当前对象内文本的字体尺寸 |
px | 像素,最常用 |
绝对长度单位 | 说明 |
in | 英寸 |
cm | 厘米 |
mm | 毫米 |
pt | 点 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
font-size: 20px;
}
</style>
</head>
<body>
<p>字体样式</p>
</body>
</html>
2.font-family 字体
有些可以用汉字表示,比如“宋体”、“微软雅黑”。可以用英文,还可以用unicode字体。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
font-size: 20px;
font-family: "宋体";
}
</style>
</head>
<body>
<p>字体样式</p>
</body>
</html>
3.font-weight 字体粗细,默认值为normal
取值:
normal:正常字体,或者用400表示。
bold:粗体,或者用700表示。
bolder:定义比继承值更重的值。
lighter:
定义比继承值更轻的值。
另一种取值:用数字代替单词,有,100,200,300,400,500,600,700,800,900。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
font-size: 20px;
font-family: "宋体";
font-weight: 400;
}
</style>
</head>
<body>
<p>字体样式</p>
</body>
</html>
4.font-style 倾斜
默认取值为normal。
normal:正常字体。
italic:斜体。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
font-size: 20px;
font-family: "宋体";
font-weight: 400;
font-style: italic;
}
</style>
</head>
<body>
<p>字体样式</p>
</body>
</html>
5.综合方式
font :font-style font-weight font-size/line-height font-family 必须按照这个顺序,其中后两个font-size,font-family不能省略。不设置的取默认值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
font: italic 400 20px "宋体";
}
</style>
</head>
<body>
<p>字体样式</p>
</body>
</html>