CSS Font(字体)属性 用于定义文字系列，大小，粗细，文字样式（如斜体）

• 字体大小font-size
• 字体粗细font-weight
• 字体样式font-style
• 字体系列font-family
• fong 连写 font: 样式font-style 大小font-size 系列font-family

CSS的文字系列font-family

CSS使用 font-family属性定义文本的字体系列

1. 字体间有空格用 "" 包裹
2. 不同字体类型用 逗号，隔开
3. 在font-family 属性中加入多种字体，是为了更方便用户。若用户设备有其中一种字体，或者依次从font-family属性查找也没有,则将使用用户的默认字体
4. 网页开发时，尽量使用系统自带字体，保证不同用户浏览器网页都可以正确显示
5. 最后一项不需要加引号

 p {font-family: 'Microsort Yahei',"微软雅黑",Arial;}

CSS的字体大小font-size

CSS使用font-size属性定义字体大小

1. 像素px是最常用的单位
2. 谷歌浏览器Chrome默认字体大小16px
3. 不同的浏览器，字体不同
4. 可以给body主体设置字体类型大小（微软雅黑，16px）
5. 注： 标题标签h1-h6比较特殊，需要单独指定字体大小

 p {font-family: "Microsort Yahei","微软雅黑",Arial;font-size: 20px;}

CSS的字体粗细fong-weight

font-weight: 属性设置字体的粗细
取值：正常（normal），加粗（blod）
若文字有什么重要意义，则用strong标签

注意

• 不是所有字体都提供9种粗细，所以页面可能会无反应
• 实际开发以正常（font-weight：400），加粗（font-weight：700）使用最多

举个栗子

/*字体粗细为400.相当于normal值（平常值），变相去加粗   */h3 {font-weight:400;
}/* 字体粗细为700 ，相当于b（blod）标签，strong标签*/p {/* font-weight: blod; */font-weight: 700;}
 阿巴阿巴
添衣服

CSS字体样式倾斜font-style

1. 该属性设置使用斜体、倾斜或正常字体。
2. CSS 使用font-style属性设置文本的倾斜，加粗b/strong，下划线 u/ins,斜体em/i,删除线del/s

取值：

• 正常（normal）
• 倾斜（italic）

注意： 字体倾斜一般不使用，更多的是去掉 i/em的倾斜

举个栗子

p {/* 设置字体系列 */font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;/* 设置字体大小 */font-size: 16px;/* 设置字体宽度  */font-weight: 700;/* 字体倾斜，一般不使用，更多的是去掉i，em的倾斜 */font-style: italic;/*  字体不倾斜 */font-style: normal;
}

CSS字体复合结构

1. 字体复合结构是为了节省代码，必须按照结构顺序 字体风格 粗细 大小 系列
2. 复合结构各属性以空格隔开
3. 字体复合结构也可以不写全，但必须得有 font-size字体大小，font-family字体类型
4. 如果同时设置单独和连写形式，最好把单独的样式写在下面，因为css会层叠覆盖

举个栗子

  .p1 {/* 字体复合结构是为了节省代码，必须按照下面书写结构顺序 字体风格 粗细 大小 系列, *//* 字体复合结构  font:font-style font-weight font-size font-family ; */font: italic 700 16px '黑体';}/* 字体复合结构也可以不写全，但必须得有 font-size字体大小，font-family字体类型 */.p_same {font: 16px '黑体';}.p2 {font-style: italic;font-weight: 700;}

我是正常p标签
我是倾斜p标签
我是倾斜p标签

样式的层叠问题

给同一个标签设置了相同的属性，此时上面样式会层叠，写在最下面的会生效

常见字体样式（了解）

• 无衬线字体（sans-serif）

1. 特点：文字笔画粗细均匀，并且首尾无装饰
2. 场景：网页中大多采用无衬线字体
3. 常见该系列字体：黑体，Arial

• 衬线字体（serif）

1. 特点：文字笔画粗细不均匀，并且首尾有笔锋
2. 场景：报纸，报刊应用广泛
3. 常见该系列字体：宋体，TimesNewRormanl

• 等宽字体（比较火）

1. 特点：每个字母或文字的宽度相等
2. 场景：一般用于程序代码编写，有利于代码的阅读和编写
3. 常见该系列字体：Consolas，fira code