css的一些基础属性——字体属性

前言：css的这些属性就是用于控制HTML样式的关键所在，所以学好这些样式也十分重要哦。

---

目录

一.css的字体属性

1.字体系列

效果演示：

2.字号大小

效果展示：

3.字体粗细

效果展示：

4.文字样式（字体倾斜）

 效果演示：

 5.字体的复合属性

效果展示：

6.字体属性的总结

 我们下期再见！！！

---

---

一.css的字体属性

1.字体系列

css使用font-family属性定义文本的字体系类

语法：（以div标签为例）

div {
  font-family: "Microseft Yahei"  /*这里设置的字体样式为微软雅黑*/
}

也可以

div {
 font-family: 微软雅黑 ;
}

中文英文都可以

注意：

• 一般情况下如果有空格隔开的多个单词组成的字体要加引号 如：“Microsoft Yahei”
• 浏览器默认微软雅黑
• 尽量使用系统自带字体，保证任何浏览器都能显示

常见的字体：（可以打开world找到里面的字体）

效果演示：

---

2.字号大小

css使用font-size属性定义字号大小

语法：

div {
  font-size: 16px;
}

注：

• 属性值可以是任意正数
• px是我们常用的单位
• 浏览器一般默认16px
• 标题标签也可以指定其大小

效果展示：

 警告：一定要跟单位！！！！

---

3.字体粗细

css使用font-weight属性设置文本字体的粗细

语法：

div {
  font-weight: bold;
}

基本属性值：

属性值	描述
normai	默认值（不加粗）
bold	定义加粗
100-900	400同等于normal 700同等于bold

注：

• 数字取100，200，300....等整数 数字后不跟单位
• 在实际开发中推荐使用数字

效果展示：

---

4.文字样式（字体倾斜）

css使用font-style属性设置文本的风格

语法：

div {
   font-style: normal;
}

基本属性值：

属性值	作用
normal	默认字体样式
italic	显示斜体

 效果演示：

 5.字体的复合属性

字体属性可以把以上文字样式综合起来写可以节约代码

顺序：

选择器: {                                    

          font-style                            

          font-weight                           

          font-size / line-height(行间距)

          font-family                            

}                                                       

例如：

div {
   font: normal 400 16px/18px "Microsoft Yahei"
}

注意：

• 使用font属性是必须严格按照上面的顺序书写，不能更改顺序，并且各个属性之间必须以空格隔开
• 不需要的属性可以省略（系统取默认值），但是必须保留font-size和font-family属性，否则font属性失效

效果展示：

---

6.字体属性的总结

属性	表示	注意点
font-size	字号	常用单位px ，一定要记得跟单位
font-family	字体	按照实际开发而定
font-weight	粗细	加粗是bold或700 不加粗是normal或400 没单位
font-size	样式	倾斜是italic  不倾斜是normal
font	连写	1.顺序不能改 2.字号和字体必须有

---

---

 我们下期再见！！！