前端CSS3--字体样式

一、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为定义穿过文本下的一条线，一般用于商品折扣价。