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 样式。

字体大小属性(font-size)

这个属性可以设置字体的大小。字体大小的设置可以有多种方式，最常用的就是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>

字体风格属性(font-style)

这个属性有三个值可选：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>

字体浓淡属性(font-weight)

这个属性常用值是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>

字体变量属性(font-variant)

这个属性有两个值，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)

这个属性是各种字体属性的一种快捷的综合写法。这个属性可以综合字体风格属性(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