3.2　文字排版

本节介绍HTML网页的文字排版，包括文字的字形和字体、上标、下标等内容。

3.2.1　字形字体

在HTML网页设计中，可以创建出风格多样的字形字体样式，具体是通过设置CSS层叠样式表的font-family属性就可以实现。

下面是一个使用font-family属性设计不同风格字形字体的HTML示例代码（详见源代码ch03/ch03-html-family.html文件）。

【代码3-5】

【代码解析】

第16～18行代码通过<p>标签元素定义了第一个段落。其中，第16行代码通过style属性定义了"font-family: '黑体';"字形字体样式。

第20～22行代码通过<p>标签元素定义了第二个段落。其中，第20行代码通过style属性定义了"font-family: 'Microsoft YaHei';"字形字体样式，该字形与“Serif”和“Sans-serif”一样为通用样式。

第24～26行代码通过<p>标签元素定义了第三个段落。其中，第24行代码通过style属性定义了"font-family: 'Verdana';"字形字体样式。

运行测试网页，效果如图3.5所示。

3.2.2　上、下标字体

在HTML网页文字排版中，上标字体与下标字体也是比较常见的。譬如，在引用文献时上标字体肯定要用到，而定义数理化符号时下标字体也是必不可少的。HTML规范中使用<sup>标签元素表示上标，<sub>标签元素表示下标。

下面是一个设置字体上下标的HTML示例代码（详见源代码ch03/ch03-html-sup-sub.html文件）。

【代码3-6】

【代码解析】

第12行代码使用sup标签元素定义了上标标记【5】，用于表示引用文献的序号。

第16行代码使用sub标签元素定义了下标标记2，用于表示二氧化碳分子符号中氧元素（O）的分子量。

运行测试网页，效果如图3.6所示。