字体大小：font-size
- 需设置单位，否则无效
- 数字+px
- Chrome浏览器默认16px大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
font-size: 40px;
}
</style>
</head>
<body>
<p>我是一个标签</p>
</body>
</html>
字体粗细：font-weight
-
取值：
纯数字：100~900 的整百数- 正常： 400
- 加粗： 700
关键字：
- 正常： normal
- 加粗： bold
- 不是所有字体都提供了九种粗细，因此部分取值页面中无变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
font-weight: 700;
}
</style>
</head>
<body>
<p>我是一个标签</p>
</body>
</html>
字体样式（是否倾斜）：font-style
- 取值:
- 正常（默认值）： normal
- 倾斜： italic
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
font-style: italic;
}
</style>
</head>
<body>
<p>我是一个标签</p>
</body>
</html>
字体类型：font-family
- 取值：字体11,字体2,字体3,字体4;
- 字体系列：sans-serif、serif、monospace等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
font-family: 微软雅黑,楷体,宋体,sans-serif;
}
</style>
</head>
<body>
<p>我是一个标签</p>
</body>
</html>
- 渲染规则：
- 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
- 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
字体类型：font 属性连写
- 属性名：font
- 取值：font：style weight size family；
- 顺序要求：style weight size family
- 省略要求：只能省略前两个
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
