如何在网页制作时使用CSS定义文本样式（一）-盈岚科技

在制作网站时，字体样式涉及文字型体效果，包括字体类型、字体大小、字体颜色等基本效果，还包括字体粗细、下划线、斜体、大小写等特殊效果。文本样式主要涉及文本排版效果。　

CSS使用font-family属性来定义字体类型，另外使用font属性也可以定义字体类型。

•font-family是字体类型专用属性，用法如下：

font-family : namefont-family : ncursive |

fantasy | monospace

| serif | sans-serif

name表示字体名称，可指定多种字体，多个字体将按优先顺序排列，以逗号隔开。在网页设计时，如果字体名称包含空格，则应使用引号括起。第二种声明方式使用所列出的字体序列名称，如果使用fantasy序列，将提供默认字体序列。

•font是一个复合属性，该属性能够设置多种字体属性，用法如下：

font : font-style || font-variant || font-weight || font-size || line-height ||

font属性至少应设置字体大小和字体类型，且必须放在后面，否则无效。前面可以自由定义字体样式、字体粗细、大小写和行高，详细讲解将在后面内容中分别介绍。

【示例】启动Dreamweaver，新建一个网页，保存为test.html，在<body>标签内输入一行段落文本。

<p>定义字体类型</p>

在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，用来定义网页字体的类型。

body { font-family:Arial, Helvetica,

sans-serif; /*字体类型*/}

p {/* 段落样式 */ font:14px "黑体";

/*14像素大小的黑体字体*/}

中文网页字体一般多定义为宋体类型，对于标题或特殊提示信息，如果需要特殊字体，则建议采用图像形式来间接实现。原因在网页设计时是中文字体类型比较少，通用字体类型就更少了，字体的表现力比较弱，即使存在各种艺术字体，但是恐于艺术字体的应用范围窄，很少被设计师用来作为网页字体使用。

CSS使用font-size属性来定义字体大小，该属性用法如下：

其中，xx-small（最小）、x-small（较小）、small（小）、medium（正常）、large（大）、x-large（较大）、xx-large（最大）表示绝对字体尺寸，这些特殊值将根据对象字体进行调整。

larger（增大）和smaller（减少）这对特殊值能够根据父对象中字体尺寸进行相对增大或者缩小处理，使用成比例的em单位进行计算。

length可以是百分数，或者浮点数字和单位标识符组成的长度值，但不可为负值。其百分比取值是基于父对象中字体的尺寸来计算，与em单位计算相同。

【示例】启动Dreamweaver，新建一个网页，保存为test.html，在<body>标签中输入以下内容：

<div>

<p class="p1">明月几时有？ 0.6in</p>

<p class="p2">明月几时有？ 0.8em</p>

<p class="p3">明月几时有？ 2cm</p>

<p class="p4">明月几时有？ 16pt</p>

<p class="p5">明月几时有？ 2pc<

/p></div>在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，分别设置各个段落中的字体大小。div{font-size:20px;} /*以像素为单位设置div标签字体大小*/

.p1{ font-size: 0.6in; } /*以英寸为单位设置字体大小*/

.p2{ font-size: 0.8em; } /*以父级字体大小为参考设置大小*/

.p3{ font-size: 2cm ; } /*以厘米为单位设置字体大小*/

.p4{ font-size: 16pt; } /*以点为单位设置字体大小*/

.p5{ font-size: 2pc; } /*以皮卡为单位设置字体大小*/

当前文章标题：如何在网页制作时使用CSS定义文本样式（一）
当前URL：http://www.lyjtt.cn/news/wzzz/3062.html

如何在网页制作时使用CSS定义文本样式（一）