![网站建设与管理](https://wfqqreader-1252317822.image.myqcloud.com/cover/860/31621860/b_31621860.jpg)
2.3 文字样式设置的基本标签
设置字体样式的基本标签是<font></font>,被其包含的文本为样式作用区。
2.3.1 设置文字的颜色
color是<font></font>标签的属性之一,用于设置文字颜色。在D:\web\目录下创建网页文件,命名为font_color.htm,编写代码如代码2.1所示。
代码2.1 字体颜色的设置:font_color.htm。
![](https://epubservercos.yuewen.com/9C9405/17122289005843206/epubprivate/OEBPS/Images/txt002_2.jpg?sign=1739294244-FdrzZTLcNaSa6iBqiHczdOxgFmHzVMZS-0-67335a726223352d3deac24adf7cc96b)
在浏览器地址栏中输入http://localhost/font_color.htm,浏览效果如图2-1所示。
![](https://epubservercos.yuewen.com/9C9405/17122289005843206/epubprivate/OEBPS/Images/txt002_3.jpg?sign=1739294244-RwD37O0sKb5EB3hucQROD4NckavGk30Y-0-2e0f99c361dd0601223a27b678aedefb)
图2-1 浏览效果
2.3.2 设置文字的尺寸
size也是<font></font>标签的属性,用于设置文字大小。size的值为1~7,默认为3。可以在size属性值之前加上“+”、“-”字符,来指定相对于字号初始值的增量或减量。在D:\web\目录下创建网页文件,命名为font_size.htm,编写代码如代码2.2所示。
代码2.2 文字尺寸的设置:font_size.htm。
![](https://epubservercos.yuewen.com/9C9405/17122289005843206/epubprivate/OEBPS/Images/txt002_4.jpg?sign=1739294244-9tZyEIgfvbVCpMZfkAXFEhTF81sdvaeW-0-118cc891c7674f0581e95d8844c367d3)
浏览效果如图2-2所示。
![](https://epubservercos.yuewen.com/9C9405/17122289005843206/epubprivate/OEBPS/Images/txt002_5.jpg?sign=1739294244-2By3XeYj8H2jX7NE5eMusx61BXZIBHPI-0-f6685b6e66b8ced73a9e4947bf8af69c)
图2-2 浏览效果(文字尺寸)
2.3.3 设置文字的字体
face也是<font></font>标签的属性,用于设置文字字体(字形)。HTML网页中显示的字形从浏览端的系统中调用,所以,为了保持字形一致,建议采用宋体,HTML页面也默认采用宋体。在D:\web\目录下创建网页文件,命名为font_face.htm,编写代码如代码2.3所示。
代码2.3 字体字形的设置:font_face.htm。
![](https://epubservercos.yuewen.com/9C9405/17122289005843206/epubprivate/OEBPS/Images/txt002_6.jpg?sign=1739294244-c3K3pL3eohyG0FqIia703j79lunzZQBt-0-598dd91b503c957ec49f7fbdf616f99d)
浏览效果如图2-3所示。
![](https://epubservercos.yuewen.com/9C9405/17122289005843206/epubprivate/OEBPS/Images/txt002_7.jpg?sign=1739294244-JoGuhJ3mNfrZwVWFxhh02GNo4BD95Cfx-0-71fb156184308bb87d6ba1f5a5b482b6)
图2-3 浏览效果(字体字型)
2.3.4 设置文字效果
1.斜体、粗体、下划线
![](https://epubservercos.yuewen.com/9C9405/17122289005843206/epubprivate/OEBPS/Images/txt002_8.jpg?sign=1739294244-ktn5DrkBHw5detilFCmH2MDSqcV9VzkX-0-4b1fb361d1b358dc72156e16cdf106e1)
用双标签<b></b>可使被作用文字加粗,使文字更加醒目,如文章的标题部分。<strong></strong>被称为特别强调标签,也是文字加粗
用双标签<u></u>可添加下划线到被作用文字上,具体代码如代码2.4所示。
代码2.4文字效果的设置。
![](https://epubservercos.yuewen.com/9C9405/17122289005843206/epubprivate/OEBPS/Images/txt002_9.jpg?sign=1739294244-NWQI8Cb5yJccNwWXjNX0w518ybIRLjGG-0-41ce2d46d1b5334bd0021edfd2bfee56)
浏览效果如图2-4所示。
![](https://epubservercos.yuewen.com/9C9405/17122289005843206/epubprivate/OEBPS/Images/txt002_10.jpg?sign=1739294244-Y9PWY6BrKcXZCFHk7W4gFQ4H8PF0cuqZ-0-12f6be53a66aef7e6ae72cbaad3c6ed1)
图2-4 浏览效果
2.其他文字效果
<hn>...</hn>用于设定标题字体大小,n=1(大)~6(小)会自动跳下一行。通常用在如章节、段落等标题上。
![](https://epubservercos.yuewen.com/9C9405/17122289005843206/epubprivate/OEBPS/Images/txt002_11.jpg?sign=1739294244-A3tjjS2MOR6N5kb9xVfn5fmRWRvfG6d6-0-0737913d2e687f1796ae579fc61483d6)
浏览效果如图2-5所示。
![](https://epubservercos.yuewen.com/9C9405/17122289005843206/epubprivate/OEBPS/Images/txt002_12.jpg?sign=1739294244-01RjZqXVESUmNmw8p6qkfFbLJaDtoYxX-0-a9aa2d92adc19b7e53ac76e92d5dfba5)
图2-5 浏览效果(其他文字效果)