3.4.2　逻辑字体

双标记对的逻辑字体和物理字体很相似，都是由标记对组成，但它们所体现的重点不同，逻辑字体所显示出来的效果更有美观感。

接下来介绍逻辑字体，逻辑字体可能很少见到，但作用很大。如在网页上表现代码形式的字符等。先看一下＜code＞，其语法形式如下。

＜code＞代码＜/code＞

说明　先大概了解语法，实例会在下一章讲解。

以下是所有逻辑字体列表，中间的省略符代表放置的文本内容，通过标记对修饰，后面的文字用来说明其功能。

＜EM＞……＜/EM＞//强调文字

＜STRONG＞……＜/STRONG＞//字体加重

＜CODE＞……＜/CODE＞//显示编程代码

＜SAMP＞……＜/SAMP＞//显示示例文字

＜KBD＞……＜/KBD＞//显示键盘按键文字

＜SMALL＞……＜/SMALL＞//缩小文字

＜BIG＞……＜/BIG＞//放大文字

以上逻辑字体语法形式与上一节中的一样，都是标记对。代码3.6罗列出了部分逻辑字体。

代码3.6　源代码\第3章\逻辑字体.html

＜em＞文字＜/em＞

＜strong＞文字＜/strong＞

＜small＞文字＜/small＞

＜big＞文字＜/big＞

试比较以上逻辑字体的区别，先看示例代码。

———————————————文件名：逻辑字体.html——————————————-

01 ＜html＞

02 ＜head＞

03 ＜title＞逻辑字体＜/title＞

04 ＜/head＞

05 ＜body＞

06 ＜！—下面表示逻辑字体—＞

07 ＜em＞文字—斜了＜/em＞

08 ＜br＞

09 ＜strong＞文字—加重＜/strong＞

10 ＜br＞

11 ＜small＞文字—小的＜/small＞

12 ＜br＞

13 ＜big＞文字—大的＜/big＞

14 ＜/body＞

15 ＜/html＞

【代码解析】在代码第5行＜body＞＜/body＞标记中插入4行文字，这些文本都被不同的逻辑字体修饰着。第7行强调其内文本，第9行加重了其内文本，第11行使其内文本变小，第13行标记对里面的文字变大显示，通过逻辑字体的设置，使文本内容效果发生变化，效果如图3.6所示。

图　3.6　常用逻辑字体

注意　在网页中包含计算机代码，较短的计算机代码可以直接用在页面中，如多行代码需要在页面中显示，在编写代码时会用到＜pre＞标记。