3.2 设置文字格式
教学录像：光盘\TM\lx\3\设置文字格式．exe
除了标题文字外，在网页中普通的文字信息更是不可缺少的。而多种多样的文字效果可以使网页变得更加绚丽。
在网页的编辑中，可以直接在文字的主体部分输入文字，这些文字会显示在页面中。这是HTML语言编辑中最简单的事情，只需要在<body>标记和</body>标记之间输入相应的文字即可。设置不同的文字效果的属性位于文字格式标记<font>中，下面将逐一讲解各种文字格式的设置方式。
3.2.1 设置文字字体——face
在HTML语言中，可以通过face属性设置文字的不同字体效果。这些字体效果必须在浏览器安装了相应的字体后才可以正确浏览，否则会被浏览器中的普通字体所代替。因此，在网页中尽量减少使用过多的特殊字体，以免在用户浏览时无法看到正确的效果。由于浏览器默认情况下都包含了宋体、黑体等几种基本字体，因此网页创建者应该注意在设计网页时，多利用这几种字体。
语法
<font face="字体1，字体2, ... ">应用了该字体的文字</font>
语法解释
在该语法中，face属性的值可以是1个或者多个。默认情况下，使用第1种字体进行显示；如果第1种字体不存在，则使用第2种字体进行代替，以此类推。如果设置的几种字体在浏览器中都不存在，则会以默认字体显示。
【例3.3】实例代码。（实例位置：光盘\TM\sl\3\3）
<html>
<head>
<title>不同字体的显示效果</title>
</head>
<body>
<font face="华文彩云">登山则情满于山</font><br /><br />
<font face="隶书">观海则意溢于海</font>
</body>
</html>
图3.3 设置不同的文字字体
运行这段代码，可以看到几种不同的字体效果，如图3.3所示。
3.2.2 设置字号——size
HTML页面中的文字可以使用不同的字号表现。字号指的是字体的大小，它没有一个相对的大小标准，其大小只是相对于默认字体而言。除了使用标题文字标记设置固定大小的字号之外，HTML语言提供了<font>标记size属性来设置普通文字的字号。
语法
<font size="文字字号"></font>
语法解释
在该语法中，文字的字号可以设置1～7，也可以是+1～+7或者是-1～-7。这些字号并没有一个固定的大小值，而是相对于默认文字大小来设定的，默认文字的大小与3号字相同，而数值越大，文字也越大。
【例3.4】实例代码。（实例位置：光盘\TM\sl\3\4）
<html>
<head>
<title>设置不同的文字大小</title>
</head>
<body>
<font size="1">1号字体的效果</font><br/>
<font size="2">2号字体的效果</font><br/>
<font size="3">3号字体的效果</font><br/>
<font size="4">4号字体的效果</font><br/>
<font size="5">5号字体的效果</font><br/>
<font size="6">6号字体的效果</font><br/>
<font size="7">7号字体的效果</font><br/>
<font size="+2">默认字号+2，也就是5号字体的效果</font><br/>
<font size="-1">默认字号-1，即2号字体的效果</font><br/>
</body>
</html>
图3.4 设置不同的字号
运行这段代码，可以看到文字的大小变化，其效果如图3.4所示。
3.2.3 设置文字颜色——color
在HTML页面中，还可以通过不同的颜色表现不同的文字效果。丰富的字符颜色毫无疑问能够极大地增强文档的表现力。
语法
<font color="颜色代码"></font>
语法解释
与网页背景色的设置类似，颜色代码也是十六进制的。
【例3.5】实例代码。（实例位置：光盘\TM\sl\3\5）
<html>
<head>
<title>设置不同的文字颜色</title>
</head>
<body>
<font face="隶书" size="+4" color="#0066FF">明日科技</font><br/>
<font face="宋体"size="+5" color="#FFCC66">编程词典</font><br/>
<font face="华文楷体"size="+3" color="#99FF00">数字化出版的领导者</font><br/>
</body>
</html>
运行这段代码，可看到不同色彩的文字效果，如图3.5所示。
图3.5 设置不同的文字颜色
3.2.4 粗体、斜体、下划线——strong、em、u
在浏览网页时，常常可以看到一些特殊效果的文字，例如粗体字、斜体字以及带下划线的文字等。而这些文字效果也可以通过设置HTML语言的标记来实现。
语法
<strong>粗体的文字</strong>
<em>斜体字</em>
<u>带下划线的文字</u>
语法解释
这几种效果的语法类似，只是标记不同。粗体的效果可以通过标记<b>来实现；斜体字可以使用标记<I>或者<cite>表示。
【例3.6】实例代码。（实例位置：光盘\TM\sl\3\6）
<html>
<head>
<title>设置不同的文字效果</title>
</head>
<body>
<strong>明日科技</strong><b>是数字化</b>的<cite>倡导者</cite>
</body>
</html>
运行这段代码，可以看到不同的样式效果，且使用不同的标记也可以达到相同的效果，如图3.6所示。
图3.6 设置文字的不同样式
3.2.5 上标与下标——sup、sub
除了设置不同的文字效果之外，有时候在网页中还需要一种特殊的文字效果，即上标和下标，这在显示公式时常常会出现，而在HTML语言中，也可以通过标记轻松进行设置。
语法
<sup>…</sup> 上标标记
<sub>…</sub> 下标标记
语法解释
在该语法中，上标标记和下标标记的使用方法基本相同，只需要将文字放在标记中间即可。
【例3.7】实例代码。（实例位置：光盘\TM\sl\3\7）
<html>
<head>
<title>上标与下标的效果</title>
</head>
<body>
在方程式中应用上标的效果<br/>
X<sup>3</sup>+9X<sup>2</sup>-3=0<br/><br/>
在文字中应用下标的效果<br/>
3X<sub>1</sub>+2X<sub>2</sub>=10
</body>
</html>
图3.7 设置文字的上标与下标
运行这段代码，可以看到如图3.7所示的效果。
3.2.6 设置删除线——strike
在网页中可以通过strike参数对文字添加删除线效果。
语法
<strike>文字</strike>或<s>文字</s>
语法解释
这两种标记都可以创建删除线效果，使用起来也很简单，只要把需要设置成删除线效果的文字放置在标记中间即可。
【例3.8】实例代码。（实例位置：光盘\TM\sl\3\8）
<html>
<head>
<title>文字的删除线效果</title>
</head>
<body>
正常的文字效果<br />
在文字上使用s标记来添加删除线<br />
<s>删除文字的效果</s><br/><br/>
在文字上使用strike标记来添加删除线<br />
<strike>删除文字的效果</strike>
</body>
</html>
运行这段代码，可以看到如图3.8所示的效果。
图3.8 删除线效果
3.2.7 等宽文字标记——code
等宽文字标记常用于英文效果，使用该标记可以实现网页中字体的等宽效果。使用等宽效果能够使页面显得更加整齐。
语法
<code>文字</code>
<samp>文字</samp>
语法解释
在该语法中，这两种标记都可以实现文字的等宽显示，而在应用时只要把需要等宽显示的文字放置在标记中间即可。
【例3.9】实例代码。（实例位置：光盘\TM\sl\3\9）
<html>
<head>
<title>设置等宽文字</title>
</head>
<body>
下面将显示两段相同的英文效果，突出等宽文字与普通英文文字的对比效果。<br/><br/>
<!--下面这段英文使用了正常的效果显示-->
普通英文效果<br/>
A day without sunshine is like night.<br/><br/>
<!--下面这段英文使用了等宽效果的效果显示-->
等宽文字效果<br/>
<code>A day without sunshine is like night.</code>
</body>
</html>
运行这段代码，可以看到如图3.9所示的效果。
图3.9 等宽文字的效果
3.2.8 空格——
一般情况下，在网页中输入文字时，如果在段落开始增加了空格，在使用浏览器进行浏览时往往看不到这些空格。这主要是因为在HTML文件中，浏览器本身会将两个句子之间的所有半角空格仅当作一个来看待。如果需要保留空格的效果，一般需要使用全角空格符号，或者通过空格码来代替。下面将介绍如何应用空格码来输入保留的空格效果。
语法
语法解释
在网页中可以有多个空格，一个“ ”只代表一个半角空格，多个空格则可以多次使用这一符号。
【例3.10】实例代码。（实例位置：光盘\TM\sl\3\10）
<html>
<head>
<title>输入空格符号</title>
</head>
<body>
在段落开始输入空格符号的效果：<br/>
 ；空格在网页排版中常常被应用到，使用空格符号在文字的前方输入几个空格，就可以
实现首行缩进的效果。<br/><br/>
在文字的中间不使用空格符号，直接输入6个半角空格的效果：<br/>
别裁伪体亲风雅， 转益多师是汝师<br/><br/>
使用空格符号的效果：<br/>
别裁伪体亲风雅，  ；转益多师是汝师<br/>
</body>
</html>
运行这段代码，可以清楚地看到不管在两个句子间输入多少个半角空格，其中仅有一个半角的空格符会被接受，其余多出的空格符将被忽略掉。而输入空格代码则可以完整地保留空格的效果，如图3.10所示。
图3.10 在网页中输入空格
3.2.9 其他特殊符号
除了空格以外，在网页的创作过程中，还有一些特殊的符号也需要使用代码进行代替。一般情况下，特殊符号的代码由前缀“&”、字符名称和后缀“;”组成。使用方法与空格符号类似，具体参见表3.2所示。
表3.2 特殊符号的表示
说明
在需要输入这些特殊符号的位置时，使用相应的代码代替即可。