CSS基础教程（六） Fonts字体

在CSS中有关于Fonts字体相关的设置，比如：字体大小、字体字型、字体样式、字体系列、字体粗细等。

一、字体大小

字体大小是通过font-size属性来设置的，但是设置时有两种方式

1、绝对大小

绝对大小就是说给字体设置一个固定的值，比如：

p {font-size:14px;}

p {font-size:0.875em;} /* 14px/16=0.875em */

2、相对大小

相对大小就是值使用的是百分比方式：

body {font-size:100%;}

二、字体样式

在CSS中字体样式是通过font-style属性来定义的，可选值有：

normal 默认值。浏览器显示一个标准的字体样式。

italic 浏览器会显示一个斜体的字体样式。

oblique 浏览器会显示一个倾斜的字体样式。

inherit 规定应该从父元素继承字体样式。

p{font-style:normal}
p{font-style:italic}
p{font-style:oblique}

三、字体系列

字体系列是通过font-family来设置的，

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

PS: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。

多个字体系列是用一个逗号分隔指明：

p{font-family:"Times New Roman", Times, serif;}

四、小型大写字母

小型大写字母使用的是font-variant，其值有：

normal 默认值。浏览器会显示一个标准的字体。

small-caps 浏览器会显示小型大写字母的字体。

inherit 规定应该从父元素继承 font-variant 属性的值。

五、字体粗细

字体的粗细是由font-weight来设置的，可选值有：

normal 默认值。定义标准的字符。

bold 定义粗体字符。

bolder 定义更粗的字符。

lighter 定义更细的字符。

inherit 规定应该从父元素继承字体的粗细。

p{font-weight:bold;}

六、属性简写

同background一样，字体也有一个font属性。

p
{
    font:italic bold 12px/30px Georgia, serif;
}

属性总结：