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=1739549308-NETorR6HF2oLoCZzONIER6uL4ik73vwR-0-4f3b37bebdac0b80b98153eed8d9872c)
在浏览器地址栏中输入http://localhost/font_color.htm,浏览效果如图2-1所示。
![](https://epubservercos.yuewen.com/9C9405/17122289005843206/epubprivate/OEBPS/Images/txt002_3.jpg?sign=1739549308-o42cOpWcXVfxrlSI68bnauFvzq2nSH5s-0-c81dd4eb274048e8c91f41dd132fbc74)
图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=1739549308-GSOx4m5bju9Mq8OKulelPOJ2f5naDiIb-0-48d7101331aa83d611d9cb0637edefb3)
浏览效果如图2-2所示。
![](https://epubservercos.yuewen.com/9C9405/17122289005843206/epubprivate/OEBPS/Images/txt002_5.jpg?sign=1739549308-9omzPwrn3yi6TkBOyka7n7UUyztCLSOE-0-a22e704480e3bdf6241dee57c5b41bdf)
图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=1739549308-PZmRqn1ME4RarT26rZCBKgk4ljWtXgbW-0-b1c78ec611887485387fb97949357f0e)
浏览效果如图2-3所示。
![](https://epubservercos.yuewen.com/9C9405/17122289005843206/epubprivate/OEBPS/Images/txt002_7.jpg?sign=1739549308-YFDhr9EpWLG7faaXMSqVIB8oPRE8SRel-0-b0cb3a2378630058c561fd93de742480)
图2-3 浏览效果(字体字型)
2.3.4 设置文字效果
1.斜体、粗体、下划线
![](https://epubservercos.yuewen.com/9C9405/17122289005843206/epubprivate/OEBPS/Images/txt002_8.jpg?sign=1739549308-453pByGZ3KDaKsgk0D9tlpUnrLqbmGf2-0-2fe4f2c3629fdb2c6fa0bd487def9561)
用双标签<b></b>可使被作用文字加粗,使文字更加醒目,如文章的标题部分。<strong></strong>被称为特别强调标签,也是文字加粗
用双标签<u></u>可添加下划线到被作用文字上,具体代码如代码2.4所示。
代码2.4文字效果的设置。
![](https://epubservercos.yuewen.com/9C9405/17122289005843206/epubprivate/OEBPS/Images/txt002_9.jpg?sign=1739549308-2Qw4Y5CZHFqF0EOAncMvd3ZrsgsFPu9C-0-2af0da0820cdc53b75212dba726415ad)
浏览效果如图2-4所示。
![](https://epubservercos.yuewen.com/9C9405/17122289005843206/epubprivate/OEBPS/Images/txt002_10.jpg?sign=1739549308-j8CeeZnS81pcImdXz2d7fAwgxml15J1c-0-a293d98cdbc9df32449a4869c71f7b40)
图2-4 浏览效果
2.其他文字效果
<hn>...</hn>用于设定标题字体大小,n=1(大)~6(小)会自动跳下一行。通常用在如章节、段落等标题上。
![](https://epubservercos.yuewen.com/9C9405/17122289005843206/epubprivate/OEBPS/Images/txt002_11.jpg?sign=1739549308-DUxCGYM8AGyMsxU62miowWgs9ARJE7jj-0-2e84b281b237f7c18de3dd45a2c9f379)
浏览效果如图2-5所示。
![](https://epubservercos.yuewen.com/9C9405/17122289005843206/epubprivate/OEBPS/Images/txt002_12.jpg?sign=1739549308-yMf1r88eUwjoU55tOOhgodNJiVJv8O29-0-cd94eff5517872bfea173284722b86ea)
图2-5 浏览效果(其他文字效果)