3.CSS字体属性
CSS Fonts（字体）属性用定义字体系列，大小粗细，和文字样式（如斜体）
3.1字体系列
CSS使用font-family属性定义文本字体系列
p { font-family:'微软雅黑' ;}
div {font-family: 'Microsoft Yahei', '微软雅黑' ; }
注意：各种字体之间必须用英文状态下的逗号隔开
一般情况下，如果有空格隔开的多个单词组成的字体，加引号。
尽量使用系统默认子弟字体，保证在任何用户的浏览器都能正确显示。
代码示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字体属性之字体系列</title> <style> h2 { font-family: '微软雅黑'; }; p { font-family: 'Times New Roman', Times, serif; } </style> </head> <h2>pink的秘密</h2> <P>卢本伟牛逼</P> <p>卢本伟牛逼</p> </body> </html>
3.2字体大小
CSS使用font-size属性定义字体大小
p {
font-size： 20px;
}
注意：px（像素）大小是我们网页最常用的单位
谷歌浏览器默认文字大小为16px
可以给整个body指定整个页面文字的大小
标题具有特殊性需要单独指定文字大小。
代码实例：
3.3字体的粗细
CSS使用font-weight属性设置文本字体的粗细。
p{
font-weight：bold;
}
| 属性值 | 描述 |
| normal | 默认值（不加粗的） |
| bold | 定义粗体（加粗的） |
| 100-900 | 400等同于normal，而700等同于bold 注意数字后面不能加数字 |
注意：学会让粗标签（如h和strong等）不加粗，或者其他标签加粗
在实际开发中我们喜欢用数字
代码示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS字体粗细</title> <style> .bold { /* font-weight:bold */ /* 这个700的后面不要给单位 等价于bold都是加粗的效果 */ /* 在实际开发中我们提倡使用数字 表示加粗或者变细 */ font-weight: 700; } h2 { font-weight: 400; /* font-weight: normal;实际开发中用数字 */ } </style> </head> <body> <h2>pink的秘密</h2> <p>优雅淡然</p> <p class="bold">前端必胜</p> </body> </html>
3.4文字样式
CSS使用font-style属性设置文本风格。
p {
font-style: normal;
}
| 属性值 | 作用 |
| normal | 默认值，浏览器会显示标准的字体样式 font-style：normal |
| italic | 浏览器会显示斜体的字体样式 |
代码示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css字体属性之文字样式</title> <style> p { font-style: italic; } em { /* 让倾斜的字体不倾斜 赶紧脉动起来 */ font-style: normal; } </style> </head> <body> <p>同学，上课时候的你</p> <em>下课时候的你</em> </body> </html>
3.5字体复合属性
字体属性可以把以上文字样式综合来写，这样可以节约代码：
body {
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>复合属性</title> <style> /* 想要div倾斜 加粗 字号设置为16像素 并且微软雅黑 */ div { /* font-style: italic; font-weight: 700; font-size: 16px; font-family: 'Microsoft yahei'; line-height: normal; */ /* 复合属性:简写的方式 节约代码 */ /* 必须严格按照一下循序: */ /* font: font-style font-weight font-size/line-height font-family; */ font: italic 700 16px 'MicroSoft yahei'; } </style> </head> <body> <div>三生三世十里桃花</div> </body> </html>
3.6字体属性小结
| 属性 | 表示 | 注意点 |
| font-size | 字号 | 我们通常用的单位是px像素，一定要跟上单位 |
| font-family | 字体 | 实际工作中按照团队约定来写字体 |
| font-weight | 字体粗细 | 记住加粗是700或者bold 不加粗是normal或者400 记住数字不要跟单位 |
| font-style | 字体样式 | 记住倾斜体是italic 不倾斜是normal 工作中我们常用normal |
| font | 字体连写 | 1字体连写是有循序的 不能随意换位置的 2.其中字号和字体必须同时出现 |
