CSS3字体样式

21fanqie

CSS3字体样式

      我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子，下面代码实现：为网页中的文字设置字体为宋体。

1. body{font-family:"宋体";}

复制代码

      这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）
现在一般网页喜欢设置“微软雅黑”，如下代码：

1. body{font-family:"Microsoft Yahei";}

复制代码

或

1. body{font-family:"微软雅黑";}

复制代码

注意：第一种方法比第二种方法兼容性更好一些。

因为这种字体即美观又可以在客户端安全的显示出来（用户本地一般都是默认安装的）。

21fanqie

使用font-size设置字体大小

举例：

1. body{font-size:12px;}

复制代码

21fanqie

使用font-weight设置字体粗细

举例

1. p span{font-weight:bold;}

复制代码

21fanqie

使用font-style设置字体样式

技术点的解释：
1、font-style可以设置字体样式，并且有种3设置方式。
2、正常字体为normal，也是font-style的默认值。
3、italic ：为设置字体为斜体，用于字体本身就有倾斜的样式。
4、oblique ：为设置倾斜的字体，强制将字体倾斜。

举例：

1. font-style:oblique;

复制代码

21fanqie

使用color设置字体颜色

技术点的解释：
1、color属性可以设置字体颜色。
2、color的值有3种设置方式：

英文命令颜色

1. p{color:red;}

复制代码

RGB颜色
这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。

1. p{color:rgb(133,45,200);}

复制代码

每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：

1. p{color:rgb(20%,33%,25%);}

复制代码

十六进制颜色
这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。

1. p{color:#00ffff;}

复制代码

配色表

21fanqie

网页中的字体css样式代码也有他自己的缩写方式，下面是给网页设置字体的代码：

body{
    font-style:italic;
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋体",sans-serif;  /*如果找不到"宋体"字体，就使用"sans-serif"字体系列*/
}

这么多行的代码其实可以缩写为一句：

1. body{
   
2.     font:italic  bold  12px/1.5em  "宋体",sans-serif;
   
3. }

复制代码

注意：
1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：

1. body{
   
2.     font:12px/1.5em  "宋体",sans-serif;
   
3. }

复制代码

只是有字号、行间距、中文字体、英文字体设置。