前端CSS3--字体样式
fontweight默认值
⼀、font-family设置字体
sans-serif是专指西⽂中没有衬线的字体
例如:为⽹页中的⽂字设置字体为"宋体"。
<style type="text/css">
body{
font-family:"宋体",sans-serif;
}
body{font-family:"Microsoft Yahei";}
</style>
⼆、font-size设置字体⼤⼩
例如:设置⽹页中⽂字的字号为12像素。
<style type="text/css">
body{
font-size:12px;
}
</style>
三、font-weight设置字体粗细
<style type="text/css">
p span{
font-weight:bold;
}
</style>
四、font-style设置字体样式
<style type="text/css">
p {
font-style:italic(斜体);
}
</style>
注意:
1、font-style可以设置字体样式,并且有种3设置⽅式。
2、正常字体normal,也是font-style的默认值。
3、italic为设置字体为斜体,⽤于字体本⾝就有倾斜的样式。
4、oblique为设置倾斜的字体,强制将字体倾斜。
(italic是字体系列(⽐如宋体,楷体)⾥的斜体,⽽oblique是字体倾斜效果,对于没有斜体的字体系列使⽤oblique实现斜体效果)
五、color设置字体颜⾊
color的值有3种设置⽅式:
1、英⽂命令颜⾊
p{color:red;}
2、RGB颜⾊
这个与 photoshop 中的 RGB 颜⾊是⼀致的,由 R(red)、G(green)、B(blue) 三种颜⾊的⽐例来配⾊。每⼀项的值可以是 0~255 之间的整数
例如:
p{color:rgb(133,45,200);}
也可以是 0%~100% 的百分数。如:
p{color:rgb(20%,33%,25%);}
3、⼗六进制颜⾊
这种颜⾊设置⽅法是现在⽐较普遍使⽤的⽅法,其原理其实也是 RGB 设置,但是其每⼀项的值由 0-255 变成了⼗六进制 00-ff。如:
p{color:#00ffff;}
七、 font样式的简写⽅式
body{
font-style:italic;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}
简写后:
body{
font:italic  bold  12px/1.5em
"宋体",sans-serif;
}
注意:
1、使⽤这⼀简写⽅式你⾄少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将⾃动使⽤默认值。
2、在缩写时 font-size 与 line-height 中间要加⼊“/”斜扛。
⼋、text-decoration添加⽂本修饰
1、text-decoration默认值为none, 定义标准的⽂本。
2、text-decoration的值为underline为定义⽂本下的⼀条线。
3、text-decoration的值为overline为定义⽂本上的⼀条线。
4、text-decoration的值为line-through为定义穿过⽂本下的⼀条线,⼀般⽤于商品折扣价。