CSS(五) Fonts字体

CSS字体属性定义字体，加粗，大小，文字样式。

所有CSS字体属性：

property	描述
font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体形式
font-variant	以小型大写字体或者正常字体显示文本
font-weight	指定字体的粗细

1.字体系列

font-family属性设置文本的字体系列。

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

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

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

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

2.字体样式

主要是用于指定斜体文字的字体样式属性。

这个属性有三个值：

• 正常-正常显示文本
• 斜体-以斜体字显示的文字
• 倾斜的文字-文字向一边倾斜（和斜体非常类似，但不太支持）

h1{font-style:normal;}
h2{font-style:italic;}
h3{font-style:oblique;}

italic和oblique的区别：

• 斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。
• 倾斜（oblique）文本是正常竖直文本的一个倾斜版本。

3.字体大小

font-size属性设置文本的大小。

务必使用正确的HTML标签，就<h1>--<h6>表示标题，<p>表示段落。

字体大小的值可以是绝对或相对的大小。

绝对大小：

• 设置一个指定大小的文本
• 不允许用户在所有浏览器中改变文本大小
• 确定了输出的物理尺寸时绝对大小很有用

相对大小：

• 相对于周围的元素来设置大小
• 允许用户在浏览器中改变文字大小

如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16像素=1em）。

h1{font-size:40px;}
h2{font-size:30px;}
h3{font-size:20px;}

4.用em来设置字体大小

16像素=1em

h1{font-size:2.5em;}     /*40px/16=2.5em*/
h2{font-size:1.875em;}     /*30px/16=1.875em*/

5.使用百分比

body{font-size:100%;}