CSS 字体

css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者必需了解的知识。

设置字体名称属性(font-family)

这个属性设置页面中选择用哪种字体，常用的字体有：Simsun、Arial、Verdana、Helvetica、 sans-serif等，定义方法：
.ziti {font-family: Simsun,Arial,Verdana;}
在这里连续定义了三种字体，当用户字库中没有第一种字体时就使用第二种，以此类推，如果CSS中设置的字体都没有则使用浏览器中的默认值。

设置字体大小属性(font-size)

font-size可以设置页面中字体大小，有三种常用的单位em，px，pt。
简短介绍一下这三种长度单位：
px，相对长度单位。像素（Pixel）。
em，相对长度单位。相对于当前对象内文本的字体尺寸。
pt，绝对长度单位。点（Point）。
其中最常用的就是px。字体设置方法如下：
.ziti {font-size:12px;}

设置字体风格属性(font-style)

字体风格是设置字体是否斜体的属性，一共有三个值：

normal、 italic、oblique，normal是默认值，italic，oblique都是斜体显示。例子：

.ziti {font-style:italic;}

设置字体粗细（浓淡）属性(font-weight)

字体的粗细（浓重）只有两个属性，因为它只有粗体和非粗体两种，它的值是normal和bold，normal是默认值。例子：

.ziti {font-weight:bold;}

设置字体变量属性(font-variant)

font-variant只针对英文字母，对汉字没有效果。它定义字体以小型号大写字母显示，小型大写字母可以理解为小个子的大写字母，它虽然是大写字母，但它的文字大小却和小写字母是相同的，比直接输入的大写字母要小。
font-variant有两个值，normal和small-caps。normal是默认值，它是正常的字体。small-caps是将小写字母转换成大写字母。例子：
.ziti {font-variant:small-caps;}

字体属性综合写法(font)

font是字体属性中可以综合定义以上五种属性的快捷方法，它可以用一行来定义font属性，书写顺序分别是：font-style font-variant font-weight font-size font-family。例子：
.ziti {font:italic normal bold 18px arial;}
如果哪项属性是默认值，可以把他省略不写，系统会自动解析其为默认值。

字体颜色(color)

字体的颜色属于CSS文本属性中的内容，它不像字体属性那样需要在color前加上font，只需要color就可以定义了。
.ziti {font:italic normal bold 18px arial;color:red;}

用em来设置字体大小

为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。

em的尺寸单位由W3C建议。

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

实例

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

尝试一下

在上面的例子，em的文字大小是与前面的例子中像素一样。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。

不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。

还可以使用百分比来调整字体大小：body {font-size:100%;}

实例：

     
  
  
font值最小的形式,定义段落的字体为1倍字体大小(font-size属性),Arial字体(font-family属性).
 
定义段落的字体为斜体(font-style属性),小型的大写字母(font-variant属性),粗体(font-weight属性),12px字体大小(font-size属性),1.2倍(字体)的行高(line-height属性),Arial字体(font-family属性).
 
字体属性演示