CSS字体属性
字体名称属性(font-family)
这个属性设定字体名称，如Arial, Tahoma, Courier等。例句如下：
.s1 {
font-family:Arial}
<HTML>
<HEAD>
<TITLE>CSS字体族科</TITLE>
<Style Type="text/css">
<!--
H1{
font-family: "隶书"
}
.text {
font-family: "宋体,仿宋_gb2312";
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的网页设计软件</H1>
<p class="text">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
</BODY>
</HTML>
文件说明：
设定H1标记样式，规定了字体为隶书，设定了class为text的自定义样式，规定了字体为宋体或仿宋，即当客户机没有第一种
宋体字体的时候，浏览器会使用第2种仿宋字体显示。
定义了样式后，第16行的标题字会自动应用H1样式，而<p>标签通过了 class 属性引用了 text 样式。
这个属性可以设置字体的大小。字体大小的设置可以有多种方式，最常用的就是pt和px(pixel)。例句如下：
.s2 {
font-size:16pt}
<HTML>
<HEAD>
<TITLE>CSS字体大小</TITLE>
<Style Type="text/css">
<!--
H1{
font-size:14pt
}
.text {
font-size:9pt
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的网页设计软件</H1>
<p class="text">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
</BODY>
</HTML>
这个属性有三个值可选：normal, italic, oblique。normal是缺省值，italic, oblique都是斜体显示。例句如下：
.s1 {
font-sytle:italic}
<HTML>
<HEAD>
<TITLE>CSS字体风格</TITLE>
<Style Type="text/css">
<!--
H1{
font-style:italic
}
.text {
font-style:oblique
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的网页设计软件</H1>
<p class="text">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
</BODY>
</HTML>
这个属性常用值是normal和bold，normal是缺省值。例句如下：
<p style = "
font-weight:bold">这段文字字体的浓淡属性(font-weight)值是bold。<p>
<HTML>
<HEAD>
<TITLE>CSS字体加粗</TITLE>
<Style Type="text/css">
<!--
H1{
font-weight:900
}
.text {
font-weight:bolder
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的网页设计软件</H1>
<p class=text>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
</BODY>
</HTML>
这个属性有两个值，normal和small-caps，normal是缺省值。small-caps表示小的大写字体（小号的大写字母）。例句如下：
.s1 {
font-variant:small-caps}
<html>
<head>
<title>字体变量属性 font-variant</title>
<STYLE>
.s1 {font-variant:small-caps}
</STYLE>
</head>
<body>
<p>字体变量(font-variant)属性有两个值，一个是缺省值normal，另外一个是small-caps。下面这段文字的字体变量属性(font-variant)是small-caps。</p>
<p class = "s1">The font-variant value of the text is "small-caps". </p>
</body>
</html>
这个属性是各种字体属性的一种快捷的综合写法。这个属性可以综合字体风格属性(font-style)，字体变量属性(font-variant)，字体浓淡属性(font-weight)，字体大小属性(font-size)等属性。例句如下：
在font属性里缩写line-height值紧跟着font-size值，使用斜杠隔开<font-size>/<line-height>
.s1 {
font:italic normal bold 11pt arial}
<html>
<head>
<title>字体属性 font</title>
<STYLE>
.s1 {font:italic normal bold 11pt Arial}
.s2 {font:normal small-caps normal 14pt Courier}
</STYLE>
</head>
<body>
<p class = "s1">这段文字的字体风格(font-style)属性值是italic，字体变量(font-variant)属性值是normal，字体浓淡(font-weight)属性值是bold，字体大小(font-size)属性值是11pt，字体名称(font-family)属性值是Arial。</p>
<p class = "s2">这段文字的字体风格(font-style)属性值是normal，字体变量(font-variant)属性值是small-caps，字体浓淡(font-weight)属性值是normal，字体大小(font-size)属性值是14pt，字体名称(font-family)属性值是Courier。</p>
</body>
</html>
字体颜色(color)
字体颜色用CSS中的color属性来表示。
原文：http://home.51.com/myloveforyou217/diary/item/10034794.html