2.2 文字效果
网页中的文字效果一般包括文字的字体、字号、上标、下标等，本节主要通过小例子来演示网页中不同的文字展现形式。
2.2.1 设置字形样式的标记
在HTML网页中可以展现出风格多样的字形样式，一般通过设置CSS的font-family属性就可以实现。
下面我们看一段设置字形样式的代码，这段代码（参见源代码chapter02/ch02-htmltag-font-family.html文件）给出一种设置不同风格字形的方法。
【示例2-5】设置字形样式的标记
01 <!DOCTYPE html>
02 <html lang="zh-cn">
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <style type="text/css">
06 p {
07 text-align: justify;
08 text-indent: 2em;
09 }
10 </style>
11 <title>HTML之设置字形样式</title>
12 </head>
13 <body>
14 <!-- 添加文档主体内容 -->
15 <h3>HTML之设置字形样式</h3>
16 <!-- 添加文档主体内容 -->
17 <p style="font-family: cursive;">
18 段落的对齐和缩进是排版最常用的方法，也是要求学生重点掌握的内容。
19 这部分内容有“段落对齐”、“段落缩进”等几个知识点。
20 </p>
21 <p style="font-family: '黑体';">
22 段落的对齐和缩进是排版最常用的方法，也是要求学生重点掌握的内容。
23 这部分内容有“段落对齐”、“段落缩进”等几个知识点。
24 </p>
25 <p style="font-family: '幼圆';">
26 段落的对齐和缩进是排版最常用的方法，也是要求学生重点掌握的内容。
27 这部分内容有“段落对齐”、“段落缩进”等几个知识点。
28 </p>
29 </body>
30 </html>
在这段HTML代码中，对3个段落设置了3种字形样式：第17行代码为第17～20行代码的段落定义了cursive字形样式，该字形与Serif和Sans-serif一样为通用样式；第21行代码为第21～24行代码的段落定义了“黑体”字形样式，该字形为特定样式；第25行代码为第25～28行代码的段落定义了“幼圆”字形样式，该字形也为特定样式。
运行测试这个页面，效果如图2.5所示。
图2.5 设置字形样式标记的效果
提示
在网页代码的头部建议将字符编码设置成utf-8编码，这样可以避免出现一些不必要的乱码现象。
2.2.2 设置上标和下标
在HTML网页中有时需要定义上标字体和下标字体，譬如在引用文献时肯定要用到上标字体，而定义数理化等元素符号时下标字体是必不可少的。HTML规范设计了sup标签表示上标，sub标签表示下标。
下面我们看一段使用上标和下标的代码，这段代码（参见源代码chapter02/ch02-htmltag-sup-sub.html文件）给出一种设置字体上标和下标的方法。
【示例2-6】设置上标和下标
01 <!DOCTYPE html> 02 <html lang="zh-cn"> 03 <head> 04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 05 <title>HTML之字体上下标</title> 06 </head> 07 <body> 08 <!-- 添加文档主体内容 --> 09 <h3>HTML之字体上下标</h3> 10 <!-- 添加文档主体内容 --> 11 <p style="text-align: justify;text-indent: 2em;"> 12 引用文献<sup>【1】</sup>是关于HTML上标标签的。 13 </p> 14 <p style="text-align: justify;text-indent: 2em;"> 15 H<sub>2</sub>O是代表水分子元素符号的。 16 </p> 17 </body> 18 </html>
在这段HTML代码中，分别使用了上、下标标记：第12行代码使用sup标签定义了上标标记【1】，用于表示引用文献的序号；第15行代码使用sub标签定义了下标标记2，用于表示水分子化学符号中氢元素（H）的分子量。
运行测试这个页面，效果如图2.6所示。
图2.6 设置上、下标标记的效果