2.2
文章目录
- 字体大小：font-size
- 字体粗细：font-weight
- 字体样式（是否倾斜）：font-style
- 字体类型：font-family
- 字体类型：font 属性连写
字体大小：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
- 省略要求：只能省略前两个
发布者：admin，转转请注明出处：http://www.yc00.com/news/1698060237a841112.html
评论列表（0条）