版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
CSS学习笔记_CSS字体属性
本文内容
CSS字体属性：
1. 字体系列
2. 字体大小
3. 字体粗细
4. 文字样式
5. 字体复合属性
6. 字体属性总结
1、字体系列
CSS 使用 font-family 属性定义文本的字体系列。
<style>
body {
font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';
}
</style>
<body>
...
</body>
注意：
- 各种字体之间必须用英文逗号隔开
- 一般情况下，如果有空格隔开的多个单词组成的字体名称，要给名称加引号，如
'Microsoft YaHei' - 尽量使用系统的默认自带字体，保证在任何用户的浏览器中都能正确显示
- 最常见的几个字体： body {font-family: ‘Microsoft YaHei’,tahoma,arial,‘Hiragino Sans GB’; }
- 浏览器在解析时，会根据顺序来，直到找到你系统有的字体为止，如果都没有，就会使用默认字体
2、字体大小
CSS 使用 font-size属性定义字体大小
<style>
p {
font-size: 20px;
}
</style>
注意：
- px （像素）大小是网页最常用的单位
- 谷歌浏览器默认的文字大小是16 px
- 不同浏览器的默认文字大小不一样，尽量给一个明确的大小值
- 可以给 body 指定整个页面文字的大小，其他特殊地方再单独调整
3、字体粗细
CSS 使用 font-weight属性设置文本字体的粗细
<style>
p {
/*实际开发中更提倡使用数字*/
font-weight: 700;/*或font-weight: bold;*/
}
</style>
| 属性值 | 描述 |
|---|---|
| normal | 默认值（不加粗的） |
| bold | 定义粗体（加粗的） |
| 100-900 | 400等同于 normal ，而 700 等同于 bold ，注意数字后不带单位 |
注意：
- 学会让加粗标签不加粗，仅仅是变大（使用font-weight 设置成 400）
- 实际开发中，一般用数字表示加粗
4、文字样式
CSS 使用 font-style 属性设置文本的风格
<style>
p {
font-style: normal;
}
</style>
| 属性值 | 作用 |
|---|---|
| normal | 默认值，浏览器显示标准的字体样式 |
| italic | 浏览器会显示斜体 |
注意：
- 平时我们很少给文字加斜体，反而要给斜体标签（em , i）改为不倾斜字体
5、字体复合属性
以下代码是设置段落文字的属性：
<style>
p {
font-style: normal;
font-weight: 700;
font-size: 16px;
font-family: 'Microsoft YaHei';
}
</style>
以上代码可以综合来写：
<style>
p {
/*font: font-style font-weight font-size/line-height font-family;*/
font: normal 700 16px 'Microsoft YaHei';
}
</style>
注意：
- 使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性之间用空格隔开
- 不需要设置的属性可以省略（取默认值），但必须保留
font-size和font-family属性，否则 font 属性将不起作用。
6、字体属性总结
| 属性 | 表示 | 注意 |
|---|---|---|
| font-size | 字号 | 单位通常是 px ，一定要带单位 |
| font-family | 字体 | 实际工作中按团队约定来写字体 |
| font-weight | 字体粗细 | 加粗是700或者 bold，不加粗是 normal 或者 400 ，不要带单位 |
| font-style | 字体样式 | 倾斜是 italic ，不倾斜是 normal ，工作中常用 normal |
| font | 字体连写 | 一定要注意顺序，不能随意换位置；字号 font-size 和 字体 font-family 不能省略 |