3.1　字体基本样式

网页字体样式包括字体类型、大小、颜色等基本效果，另外还包括一些特殊的样式，如字体粗细、下划线、斜体、大小写样式等。

3.1.1　定义字体类型

视频讲解

CSS使用font-family属性来定义字体类型，用法如下。

     font-family : name
     font-family :ncursive | fantasy | monospace | serif | sans-serif

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

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

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

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

font是一个复合属性，能够设置多种字体属性，如字体大小、字体类型、行高、艺术字体等。用法如下。

     font : font-style || font-variant || font-weight || font-size || line-height || font-family
     font : caption | icon | menu | message-box | small-caption | status-bar

属性值之间以空格分隔。font属性至少应设置字体大小和字体类型，且必须放在后面，否则无效。前面可以自由定义字体样式、字体粗细、大小写和行高，详细用法将在后面小节中分别介绍。

提示：中文网页字体多定义为宋体类型，对于标题或特殊提示信息，如果需要特殊字体，则建议采用图像形式来间接实现。

【示例2】以列表的形式设置多种字体类型。在上面示例基础上，为段落文本设置3种字体类型，其中第一个为具体的字体类型，而后面两个为通用字体类型。

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

注意，字体列表以逗号进行分隔，浏览器会根据这个字体列表来检索用户系统中的字库，按照从左到右的顺序进行选用。如果没有找到列表中对应的字体，则选用默认字体进行显示。

3.1.2　定义字体大小

视频讲解

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

     font-size : xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length

其中，xx-small（最小）、x-small（较小）、small（小）、medium（正常）、large（大）、x-large（较大）、xx-large（最大）表示绝对字体尺寸，这些特殊值将根据对象字体进行调整；larger（增大）和smaller（减少）这对特殊值能够根据父对象中字体尺寸进行相对增大或者缩小处理，使用成比例的em单位进行计算；length可以是百分数，或者浮点数字和单位标识符组成的长度值，但不可为负值。其百分比取值是基于父对象中字体的尺寸来计算，与em单位计算相同。

提示：CSS提供了很多单位，它们可以被归为两大类：绝对单位和相对单位。

绝对单位所定义的字体大小是固定的，大小显示效果不会受外界因素影响。例如，in（inch，英寸）、cm（centimeter，厘米）、mm（millimeter，毫米）、pt（point，印刷的点数）、pc（pica，1pc=12pt）。此外，xx-small、x-small、small、medium、large、x-large、xx-large这些关键字也是绝对单位。

相对单位所定义的字体大小一般是不固定的，会根据外界环境而不断发生变化，介绍如下。

☑　px（pixel，像素）：根据屏幕像素点的尺寸变化而变化。因此，不同分辨率的屏幕所显示的像素字体大小也是不同的，屏幕分辨率越大，相同像素字体就显得越小。

☑　em：相对于父辈字体的大小来定义字体大小。例如，如果父元素字体大小为12像素，而子元素的字体大小为2em，则实际大小应该为24像素。

☑　ex：相对于父辈字体的x高度来定义字体大小，因此ex单位大小既取决于字体的大小，也取决于字体类型。在固定大小的情况下，实际的x高度将随字体类型不同而不同。

☑　%：以百分比的形式定义字体大小，它与em效果相同，相对于父辈字体的大小来定义字体大小。

☑　larger和smaller：这两个关键字将以父元素的字体大小为参考进行换算。

【示例1】本示例演示了如何为网页文档定义字体大小。新建网页，保存为test.html，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，设置网页字体默认大小、正文字体大小，以及栏目中字体大小。

【示例2】正确规划网页字体大小。网页设计师常用的字体大小单位包括像素和百分比，本示例围绕这两个单位进行讨论和练习。

☑　对于网页宽度固定或者栏目宽度固定的布局，使用像素是正确的。

☑　对于页面宽度不固定或者栏目宽度也不固定的页面，使用百分比或em是正确选择。

从用户易用性角度考虑，定义字体大小应该以em（或%）为单位进行设置。主要考虑因素是：一方面，有利于客户端浏览器调整字体大小；另一方面，通过设置字体大小的单位为em或百分比，使字体能够适应版面宽度的变化。

【操作步骤】

第1步，新建一个网页，保存为test1.html，在<body>标签内输入如下结构。

第2步，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表。然后定义样式，设计页面正文字体大小为12像素，使用em来设置，则代码如下。

计算方法为：浏览器默认字体大小为16像素，用16像素乘以0.75即可得到12像素。同样的道理，预设14像素，则应该是0.875em；预设10像素，则应该是0.625em。

第3步，在复杂结构中如果反复选择em或百分比作为字体大小，可能会出现字体大小显示混乱的状况。如果修改上面代码中的样式，分别定义body、div和p元素的字体大小为0.75em，由于em单位是以上级字体大小为参考进行显示，所以在浏览器中预览就会发现正文文字看不清楚，如图3.1所示。

     body, div, p {font-size:0.75em;}

图3.1　以em为单位所带来的隐患

提示：根据第2步的计算方法，body字体大小应该为12像素，而<div id="content">内字体大小只为9像素，<div id="sub">内字体只为7像素，段落文本的字体大小只为5像素。所以，不要嵌套使用em单位定义字体大小。

3.1.3　定义字体颜色

视频讲解

CSS使用color属性来定义字体颜色，用法如下。

     color : color

参数color表示颜色值。

【示例】本示例演示了如何在文档中定义字体颜色。新建一个网页，保存为test.html，在<head>标签内添加<style type="text/css">标签，定义内部样式表，然后输入下面样式，定义页面、段落文本、<div>标签、<span>标签包含的字体的颜色。

提示：CSS 3新增以下3种颜色表示法。

☑　RGBA颜色表示法

RGBA颜色表示法是在RGB颜色的基础上增加了Alpha通道，这样就可以定义半透明的颜色。例如，color:rgba(255,0,0,5);声明可以定义半透明的红色。

☑　HSL颜色表示法

HSL颜色表示法是使用色相（H）、饱和度（S）和亮度（L）表示颜色的一种方法。例如，color:hsl(0,100%,100%);表示红色。

☑　HSLA颜色表示法

HSLA颜色表示法是在HSL颜色的基础上增加了Alpha通道。例如，color:hsla(0, 100%,100%,5);表示半透明的红色。

3.1.4　定义字体粗细

视频讲解

CSS使用font-weight属性来定义字体粗细，用法如下。

     font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

font-weight属性取值比较特殊，其中normal关键字表示默认值，即正常的字体，相当于取值为400。bold关键字表示粗体，相当于取值为700或者使用<b>标签定义的字体效果。bolder（较粗）和lighter（较细）是相对于normal字体粗细而言的。

另外，也可以设置值为100、200、300、400、500、600、700、800、900，它们分别表示字体的粗细，是对字体粗细的一种量化方式，值越大就表示越粗，相反就表示越细。

【示例】本示例演示如何定义网页对象的字体粗细样式。新建一个网页，保存为test.html，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，分别定义段落文本、一级标题、<div>标签包含字体的粗细效果，同时定义一个粗体样式类。

注意：设置字体粗细也可以称为定义字体的重量。对于中文网页设计来说，一般使用bold（加粗）和normal（普通）两个属性值即可。

3.1.5　定义斜体字体

视频讲解

CSS使用font-style属性来定义字体倾斜效果，用法如下。

     font-style : normal | italic | oblique

其中，normal表示默认值，即正常的字体；italic表示斜体；oblique表示倾斜的字体。italic和oblique两个取值只在英文等西方文字中有效。

【示例】本示例演示了如何为网页定义斜体样式类。新建一个网页，保存为test.html，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，定义一个斜体样式类。

在<body>标签中输入一行段落文本，并把斜体样式类应用到该段落文本中。

3.1.6　定义下划线

视频讲解

CSS使用text-decoration属性来定义字体下划线效果，用法如下。

     text-decoration : none || underline || blink || overline || line-through

其中，none表示默认值，即无装饰字体；underline表示下划线效果；blink表示闪烁效果；overline表示上划线效果；line-through表示删除线效果。

【操作步骤】

第1步，新建一个网页，保存为test.html，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，定义3个装饰字体样式类。

     .underline {text-decoration:underline;}  /*下划线样式类 */
     .overline {text-decoration:overline;}  /*上划线样式类 */
     .line-through {text-decoration:line-through;} /* 删除线样式类 */

第2步，在<body>标签中输入3行段落文本，并分别应用上面的装饰类样式。

     <p class="underline">昨夜西风凋碧树，独上高楼，望尽天涯路</p>
     <p class="overline">衣带渐宽终不悔，为伊消得人憔悴</p>
     <p class="line-through">众里寻他千百度，蓦然回首，那人却在，灯火阑珊处。</p>

第3步，再定义一个样式，在该样式中，同时声明多个装饰值，定义的样式如下。

     .line {text-decoration:line-through overlineunderline;}

第4步，在正文中输入一行段落文本，并把这个line样式类应用到该行文本中。

     <p class="line">古今之成大事业、大学问者，必经过三种之境界。</p>

第5步，在浏览器中预览，可以看到最后一行文本显示多种修饰线效果，如图3.2所示。

图3.2　多种修饰线的应用效果

3.1.7　定义字体大小写

视频讲解

CSS使用font-variant属性来定义字体大小写效果，该属性用法如下。

     font-variant : normal | small-caps

其中，normal表示默认值，即正常的字体；small-caps表示小型的大写字母字体。

【示例1】本示例演示了如何定义大写字体样式。新建一个网页，保存为test.html，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，定义一个类样式。

     .small-caps {/* 小型大写字母样式类 */
         font-variant:small-caps;
     }

然后在<body>标签中输入一行段落文本，并应用上面定义的类样式。

     <p class="small-caps">font-variant </p>

注意，font-variant仅支持以英文为代表的西文字体，中文字体没有大小写效果区分。如果设置了小型大写字体，但是该字体没有找到原始小型大写字体，则浏览器会模拟一个。例如，可通过使用一个常规字体，并将其小写字母替换为缩小过的大写字母。

提示：CSS还定义了一个text-transform属性，该属性也能够定义字体大小写效果。不过该属性主要定义单词大小写样式，用法格式如下。

     text-transform : none | capitalize | uppercase | lowercase

其中，none表示默认值；capitalize表示将每个单词的第一个字母转换成大写，其余无转换发生；uppercase表示把所有字母都转换成大写；lowercase表示把所有字母都转换成小写。

【示例2】本示例借助text-transform属性定义首字母大写、全部大写和全部小写3个样式类。新建一个网页，保存为test1.html，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，定义3个类样式。

     .capitalize {text-transform:capitalize;}/*首字母大小样式类 */
     .uppercase {text-transform:uppercase;}/*大写样式类 */
     .lowercase {text-transform:lowercase;}/* 小写样式类 */

在<body>标签中输入3行段落文本，并分别应用上面定义的类样式。

     <p class="capitalize">text-transform:capitalize;</p>
     <p class="uppercase">text-transform:uppercase;</p>
     <p class="lowercase">text-transform:lowercase;</p>

分别在IE和Firefox浏览器中预览，则会发现：IE认为只要是单词就把首字母转换为大写，如图3.3所示；而Firefox认为只有单词通过空格间隔之后，才能够成为独立意义上的单词，所以几个单词连在一起时就算作一个词，如图3.4所示。

图3.3　IE中解析的大小写效果

图3.4　Firefox中解析的大小写效果

上一章目录下一章