字体系列的认识和设置字体

1.font-family
作用：设置文本的字体系列

语法：font-family:字体名称；

常用值：

一个字体名称或系列名称（介绍常用字体名称、字体系列）

微软雅黑 Microsoft YaHei

宋体 SimSun

黑体 HeiTi

楷体 KaiTi

多个字体名称

逗号分开 如果浏览器不支持第一个字体，则会尝试下一个（回退机制）

.box{
    /*font-family:"微软雅黑","宋体";*/
    /*font-family:"宋体","微软雅黑"; *//*与上一个相比产生的效果不同，谁在前使用哪一个*/
    font-family:"微软雅黑abc","宋体"; 
    /*第一个任意改写一个系统不存在的字体，会按照第二个字体显示*/
}
注意:如果字体名称包含空格、汉字、特殊字符，必须加引号!

.box{font-family: "Microsoft YaHei";}
2. font-size

作用：设置字体的大小

语法：font-size:值；

常用值：

长度值（通常是像素px）

百分比（相对于父元素计算）

em相对单位

如果用于字号，相当于父元素字号计算，如果用于其它属性，相对于当前元素的字号

大多数浏览器的默认值字号：16px

3. font-style

作用：设置字体的大小

语法：font-style:值；

常用值：

normal默认值

italic斜体显示

4.font-weight

作用：设置字体粗细

语法：font-weight:值；

常用值：

normal默认值

bold加粗

100-900九级字重，400相当于normal，700相当于bold

注意：不是所有字体都内置了九级字重

5.line-height

作用：设置行高（效果是产生文本行间距）

语法：line-height:值；

特性：实现单行文本的垂直居中

测量：文字高+行间距

常用值

normal默认。设置合理的行间距。

px 设置固定的行间距。

number设置数字，此数值会与当前的字号相乘来设置行间距。

百分比:相对于font-size计算

.box{
     /*line-height:2;*/
 line-height:200%; /*产生的效果一致都是字号的两倍*/
}
 6.font简写

作用：设置所有字体属性

语法：

font: 字体风格 字体加粗 字号/行高 字体；

总结：

只有当【字号和字体】同时存在简写才是有效的，简写属性可以精简代码

.box2{
    /* font:italic bold 20px "宋体"; */
    font:20px "