CSS字体样式属性
一、font-size:字号大小
该属性可以使用相对长度单位(推荐),也可以使用绝对长度单位,推荐使用像素单位px。
相对长度单位 说明
em相对于当前对象内文本的字体尺寸
px 像素(推荐)
绝对长度单位 说明
in 英寸
cm厘米
mm 毫米
pt 点
Tip:谷歌浏览器默认的字号大小是16 px。
[样例代码]
<style>
p{
font-size: 16px;
}
</style>
二、font-family:字体
该属性用于设置字体,网页中常用的字体有宋体(比较适合印刷)、微软雅黑、黑体等。
[样例代码]
<style>
*{
/*font-family: "微软雅黑";*/
font-family: "Microsoft yahei",Arial;
}
</style>
小贴士:
1、现在网页中普遍使用14px+;2、尽量使用偶数的数字字号,否则老的浏览器用奇数容易出现bug;3、各种字体之间必须使用英文状态下的逗号隔开;4、中文字体需要加英文状态下的引号,英文字体一般不需要加引号,当需要设置英文字体时,英文字体名必须位于中文字体名之前。5、如果字体名中包含了空格、*、#、$、\等符号,则该字体必须加英文状态下的单引号或者双引号;6、尽量使用习题默认字体,保证在任何用户的浏览器中都可以正常显示;7、如果有多个字体,系统会逐个按照优先级去查找,如果一个都找不到(书写问题/浏览器兼容性),则使用浏览器默认字体;
CSS Unicode编码
在CSS直接使用Unicode编码来写字体名称可以避免一些浏览器不识别的问题,使其可以正确解析。
三、font-weight:字体粗细
字体加粗除了使用b和strong标签外,还可以使用CSS来实现,但是CSS是没有语义的。
normal:正常字体(不加粗),相当于400
bold:粗体,相当于700
bolder:特粗体
lighter:细体
number:100/200/300...900 (建议用数字,解析起来更快)
[样例代码]
<style>
a{
/*font-weight: bold;*/
font-weight: 700; /* 没有单位 == bold */
}
</style>
四、font-style:字体风格
字体倾斜除了用i和em标签之外,还可以使用CSS来实现,但是CSS是没有语义的。
normal:正常字体(让斜体变正常)
italic:斜体
[样例代码]
<style>
em{
color:skyblue;
font-style: normal;
}
</style>