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 "