5.css文本样式[上]

　　下面的用一个表格总结了文本样式中字体的一些设置方法：

　　表格里面的属性名都有一个特点，那就是都以font开头，说明这些属性都是针对与字体，下面来逐一介绍如何使用。

p {
    font-size: 50px;
} 

　　解释：这个属性是用来专门设置字体的大小的，除了可以使用自定义的大小之外，还有一些预设的值，有以下表格的值可供参考使用。

　　这里要对smaller和larger进行一下说明，首先，这两个值要生效，要先对其父元素进行字体的大小设置之后，在用父元素作为参照，得出相对的大小。

//先设置父元素字体大小
body {
    font-size: 50px;
}
//再设置相对小一些
p {
    font-size: smaller;
 }

　　而具体相对小多少，这些也是由浏览器定义的。

　　表格里说的很清楚，这个属性只对英文字母有效，有下面的值可供使用。

　　这里先说small-caps，其实就是将所有的小写字母转换为大写，所谓的小型大写，也就是大写以后并不会改变字体的大小，不影响原来就有的大小字母。具体效果如下：

<span>Scolia</span>

　　未进行设置时：

　　设置后：

span {
    font-variant: small-caps;
}

　　看到这里，我想你应该知道什么叫小型大写字母了。

　　继续讲normal这个值，这个值的应用场景是在于父元素已经先设置了small-caps这个值了，但是其子元素我不希望用small-caps这个值的效果显示，此时就可以用normal恢复默认的效果了。

//先让父元素设置小型大写
body {
    font-variant: small-caps;
} 

//让子元素设置恢复小写
span {
    font-variant: normal;
}

　　这个属性是设置字体是否倾斜，有下面的值可供选择。

p {
    font-style: italic;
}

　　解释:normal和上面一样，就不再说明了。这里说下oblique，这个值一般在字体文件没有斜体时使用，一般用户安装的中文字体都是含有斜体的，可能会在其他国家文字上使用，不过使用的不多。

　　设置字体是否加粗或变细，有下面的值可以选择：

p {
    font-weight: bold;
} 

　　解释：使用lighter，会让字体比普通效果更细，但是bold和bolder的效果是一样的，浏览器体现不出其中的差别。

　　设定使用的字体的名称，当然这个字体要用户已经安装了的，不然没效。

p {
    font-family: 微软雅黑;    /*只声明一个字体，如用户没安装，则无效*/
} 

p {
    font-family: 楷体,微软雅黑,宋体; /*使用备用字体，会依次查找，找的哪个用哪个*/
}

　　可以用一个属性，对上面的所有效果进行设置，其有效的值是一样的。

p {
    font: 50px 楷体;
} 

　　解释：其格式是这样的：[是否倾斜|是否加粗|是否转小型大写] 字体大小 字体名称；[]代表可选，|代表用来分隔选项，并不是要将|写进去。

　　为了防止自己使用的字体而客户端没有安装，造成现实效果与设计的不同的情况，可以在服务器提供相应的字体。

@font-face {
    font-family: abc;  /*为提供的字体起个别名方便引用*/
    src: url(‘BrushScriptStd.otf‘);  /*字体文件的在服务器的路径*/
}

p {
    font-size: 50px;
    font-family: abc; /*引用时使用别名*/
}