HTML字体
字体在使网站更易于用户使用和提高内容可读性方面发挥着非常重要的作用。字体和颜色完全取决于用于查看页面的计算机和浏览器,但可以使用HTML
标签可为你网站上的文本添加样式,大小和颜色。你可以使用
字体标签具有三个称为 大小,颜色 , and face 自定义字体。要在网页中的任何时间更改任何字体属性,只需使用标记。后面的文本将保持更改,直到你使用 font>标记关闭为止。你可以在一个标记内更改一个或所有字体属性。
注意 :The font and basefont 标记已弃用,并且应该在将来的HTML版本中将其删除。因此,不应该使用它们,建议使用CSS样式来操纵字体。但仍出于学习目的,本章将详细解释font和basefont标签。
设置字体大小
你可以使用以下方式设置内容字体大小 size 属性。可接受的值的范围是1(最小)到7(最大)。字体的默认大小是3。
<!DOCTYPE html> <html> <head> <title>Setting Font Size</title> </head> <body> <font size = "1">Font size = "1"</font><br /> <font size = "2">Font size = "2"</font><br /> <font size = "3">Font size = "3"</font><br /> <font size = "4">Font size = "4"</font><br /> <font size = "5">Font size = "5"</font><br /> <font size = "6">Font size = "6"</font><br /> <font size = "7">Font size = "7"</font> </body> </html>
这将产生以下结果:
相对字体大小
你可以指定比预设字体大多少个尺寸或少几个小尺寸。你可以像这样指定 or
<!DOCTYPE html> <html> <head> <title>Relative Font Size</title> </head> <body> <font size = "-1">Font size = "-1"</font><br /> <font size = "+1">Font size = "+1"</font><br /> <font size = "+2">Font size = "+2"</font><br /> <font size = "+3">Font size = "+3"</font><br /> <font size = "+4">Font size = "+4"</font> </body> </html>
这将产生以下结果:
设置字体
你可以使用设置字体 face 属性,但请注意,如果查看页面的用户未安装字体,则他们将无法看到该字体。相反,用户将看到适用于用户计算机的默认字体。
<!DOCTYPE html> <html> <head> <title>Font Face</title> </head> <body> <font face = "Times New Roman" size = "5">Times New Roman</font><br /> <font face = "Verdana" size = "5">Verdana</font><br /> <font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br /> <font face = "WildWest" size = "5">WildWest</font><br /> <font face = "Bedrock" size = "5">Bedrock</font><br /> </body> </html>
这将产生以下结果:
指定备用字体
访客只有在计算机上安装了该字体后,才能看到你的字体。因此,可以通过列出用逗号分隔的字体名称来指定两个或多个字体。
<font face = "arial,helvetica"> <font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">
加载页面后,他们的浏览器将显示第一个可用的字体。如果未安装任何给定字体,则它将显示默认字体 英语字体格式一种 .
注意 :检查完整清单 HTML标准字体 .
设置字体颜色
你可以设置任何喜欢的字体颜色 color 属性。你可以通过颜色名称或该颜色的十六进制代码指定所需的颜色。
注意 :你可以查看完整的清单 带代码的HTML颜色名称 .
<!DOCTYPE html> <html> <head> <title>Setting Font Color</title> </head> <body> <font color = "#FF00FF">This text is in pink</font><br /> <font color = "red">This text is red</font> </body> </html>
这将产生以下结果:
元素
<!DOCTYPE html> <html> <head> <title>Setting Basefont Color</title> </head> <body> <basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000"> <p>This is the page's default font.</p> <h2>Example of the <basefont> Element</h2> <p><font size = "+2" color = "darkgray"> This is darkgray text with two sizes larger </font> </p> <p><font face = "courier" size = "-1" color = "#000000"> It is a courier font, a size smaller and black in color. </font> </p> </body> </html>
这将产生以下结果: