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所示。