2.1 设置文字效果

设计网页离不开字体的设置，恰当的字体运用能够丰富网页的内容，美化文字的视觉效果。本节从文字的细节修饰着手，使读者轻松把握HTML的各种字体格式的变化，制作出更加精美的网页。

2.1.1 文字样式<font>标签

<font>标签可以用来设置文字的颜色、字体和大小，是网页设计的常用标签。可以通过<font>标签中的face属性设置不同的字体，可以通过<font>标签中的size属性来设置文字的字体大小，还可以通过<font>标签中的color属性来设置文字的颜色。

1. 设置字体

face属性规定的是字体的名称，如中文字体的“宋体”“楷体”和“微软雅黑”等。可以通过字体的face属性设置不同的字体，设置的字体效果必须在浏览器中安装相应的字体才可以正确浏览，否则有些特殊字体会被浏览器中的普通字体所代替。

设置字体的基本语法如下。

<font face="字体名称">……</font>

face属性用于设置文本所采用的字体。如果浏览器能够在当前系统中找到该字体，则使用所设置的字体显示，如果在当前系统中找不到该字体，则会使用默认的字体显示文字。

如下面的HTML网页代码，分别为文字设置不同的字体。

…
<body>
字体为宋体：<font face="宋体">欢迎光临我们的网站</font><br>
字体为楷体：<font face="楷体">欢迎光临我们的网站</font><br>
字体为黑体：<font face="黑体">欢迎光临我们的网站</font><br>
</body>
…

2. 设置字体大小

文字的大小也是字体的重要属性之一。除了使用标题文字标签设置固定大小的字号外，HTML语言还提供了用<font>标签的size属性来设置普通文字的字号的方法。

设置文字大小的基本语法如下。

<font size="文字大小">……</font>

size的属性值为1~7，默认值为3，也可以在属性值之前加上+或-字符，来指定相对于初始值的增量或减量。文字的字号可以设置为1~7，也可以是+1~+7或者-1~-7。这些字号并没有固定的大小值，而是相对于默认文字大小来设定的，默认文字的大小与3号字相同，数值越大，文字也越大。

如下面的HTML网页代码，分别为文字设置不同的字体大小。

…
<body>
size为1：<font size="1">网页设计</font><br>
size为2：<font size="2">网页设计</font><br>
size为3：<font size="3">网页设计</font><br>
size为4：<font size="4">网页设计</font><br>
size为5：<font size="5">网页设计</font><br>
size为6：<font size="6">网页设计</font><br>
size为7：<font size="7">网页设计</font><br>
</body>
…

3. 设置文字颜色

在HTML页面中，可以设置字体的不同颜色，使页面看起来更加的丰富多彩，吸引浏览者的注意。

设置字体颜色的基本语法如下。

<font color="颜色值">……</font>

color属性的颜色值可以用浏览器能够识别的颜色名称或十六进制颜色值表示。

如下面的HTML网页代码，分别使用颜色名称和十六进制颜色值设置文字颜色。

…
<body>
红色文字：<font color="red">网页设计</font><br>
蓝色文字：<font color="#0000FF"> 网页设计</font><br>
</body>
…

实战 使用<font>标签设置网页文字效果

最终文件：最终文件\第2章\2-1-1.html　视频：视频\第2章\2-1-1.mp4

01 执行“文件>打开”命令，打开页面“源文件\第2章\2-1-1.html”，效果如图2-1所示，切换到代码视图中，可以看到相应的HTML代码，如图2-2所示。

图2-1　打开页面

图2-2　网页HTML代码

02 为页面中相应的文字添加<font>标签，并在该标签中添加相应的属性设置，如图2-3所示。保存页面，在浏览器中预览页面，可以看到设置后文字的效果，如图2-4所示。

图2-3　设置文字的基本属性

图2-4　预览文字效果

技巧

设置网页的文字颜色时一定要注意文字颜色的清晰和鲜明，并且与网页的背景色相搭配，从而提高网页文字的可读性和网页的整体美观程度。

03 返回网页的HTML代码中，使用相同的方法为其他相应的文字添加<font>标签，进行相关设置，如图2-5所示。保存页面，在浏览器中预览页面，可以看到设置后文字的效果，如图2-6所示。

图2-5　设置文字的基本属性

图2-6　预览文字效果

提示

在网页中通过<font>标签设置字体时，可以将字体设置为任意的字体，但是所设置的字体必须在浏览该网页的电脑中也安装才能正确显示，如果电脑中没有安装的特殊字体会被浏览器中的普通字体所替代。目前，在操作系统中默认安装的中文字体有宋体、黑色、幼圆和微软雅黑等。

2.1.2 文字加粗<b>和<strong>标签

网页中对于需要强调的内容很多时候使用了加粗的方法，以使文字更加醒目。可以实现加粗效果的标签是<b>标签和<strong>标签，其中<strong>标签被称为特别强调标签，目前比<b>标签使用更加频繁。

加粗文字<b>和<strong>标签的基本语法格式举例如下。

<b>这是粗体字</b>
<strong>这也是粗体字</strong>

在<b>和</b>之间的文字或在<strong>和</strong>之间的文字，浏览器中都会以粗体显示。

提示

粗体文字标签<b>和<strong>都是需要添加结束标签的，如果没有结束标签，则浏览器会认为从<b>或<strong>标签开始的所有文字都是粗体。

2.1.3 文字倾斜<i>和<em>标签

标签<i>能够使作用范围内的文字倾斜；<em>是强调标签，它的效果也是使文字倾斜，目前比<i>标签使用更加频繁。

倾斜文字标签<i>和<em>的基本语法格式举例如下。

<i>斜体文字</i>
<em>斜体文字</em>

2.1.4 文字下划线<u>标签

<u>标签的使用和粗体、斜体标签类似，可以使用该标签作用于需要添加下划线的文字。<u>标签的基本语法格式举例如下。

<u>添加了一条下划线</u>

技巧

在网页中除了可以使用<u>标签实现文字的下划线效果，还可以通过CSS样式中的text-decoration属性，设置该属性值为underline，为网页中需要实现下划线的文字应用相应的CSS样式，同样可以实现下划线的效果。

实战 为文字添加加粗、倾斜和下划线修饰

最终文件：最终文件\第2章\2-1-4.html　视频：视频\第2章\2-1-4.mp4

01 执行“文件>打开”命令，打开页面“源文件\第2章\2-1-4.html”，效果如图2-7所示，切换到代码视图中，可以看到相应的HTML代码，如图2-8所示。

图2-7　打开页面

图2-8　网页HTML代码

02 为页面中相应的文字添加加粗文字标签<b>，如图2-9所示。保存页面，在浏览器中预览页面，可以看到文字加粗显示的效果，如图2-10所示。

图2-9　为文字添加加粗标签

图2-10　预览文字加粗效果

03 返回网页HTML代码中，为页面中相应的文字添加文字倾斜<i>标签，如图2-11所示。保存页面，在浏览器中预览页面，可以看到文字倾斜显示的效果，如图2-12所示。

图2-11　为文字添加倾斜标签

图2-12　预览文字倾斜效果

04 返回网页HTML代码中，为页面中相应的文字添加下划线<u>标签，如图2-13所示。保存页面，在浏览器中预览页面，可以看到文字添加下划线的效果，如图2-14所示。

图2-13　为文字添加下划线标签

图2-14　预览文字下划线效果

2.1.5 其他文字修饰标签

为了满足不同需求，HTML还有其他用来修饰文字的标签，比较常用的有上标格式标签<sup>、下标格式标签<sub>和删除线标签<strike>等。

<sup></sup>为上标格式标签，多用于数学指数的表示，如某个数的平方或者立方。<sub></sub>为下标格式标签，多用于注释及数学的底数表示。<strike></strike>为删除线标签，多用于删除效果。

实战 为文字添加上标和删除线

最终文件：最终文件\第2章\2-1-5.html　视频：视频\第2章\2-1-5.mp4

01 执行“文件>打开”命令，打开页面“源文件\第2章\21-5.html”，效果如图2-15所示，切换到代码视图中，可以看到相应的HTML代码，如图2-16所示。

图2-15　打开页面

图2-16　网页HTML代码

02 为页面中相应的文字添加上标格式<sup>标签，从而实现上标的效果，如图2-17所示。保存页面，在浏览器中预览页面，可以看到所实现的上标效果，如图2-18所示。

图2-17　为文字添加上标标签

图2-18　预览文字上标效果

03 返回网页HTML代码中，为页面中相应的文字添加删除线<strike>标签，如图2-19所示。保存页面，在浏览器中预览页面，可以看到为文字添加删除线的效果，如图2-20所示。

图2-19　为文字添加删除线标签

图2-20　预览文字删除线效果

上一章目录下一章