首页 > web前端 > html教程 > HTML 中的字体标签

HTML 中的字体标签

WBOY
发布: 2024-09-04 16:27:51
原创
423 人浏览过

HTML 中的字体标签是用于使网页或 HTML 文档更具吸引力的最重要属性之一。它具有更改所包含文本的大小、颜色和样式的属性。借助字体标签,可以使网页的大小、颜色和外观采用相同的文本格式。该标签主要作用于尺寸、面或类型和颜色等三个主要属性。字体标签作为 HTML 中的内联元素来更改 HTML 文档中块文本的某些功能。 内包含的文本标签用于定义其中包含的文本的样式。

语法:

<font size =" " face =" " color=" ">
登录后复制
  • 以上语法状态,字体大小是语法中的属性,用于设置文本的具体大小。该大小可以定义为 1 到 7 之间的数字,其中 1 表示最小文本,7 表示最大文本大小。字体标签中的face属性用于定义HTML文档中的字体类型,而color属性用于定义所包含文本的特定颜色。 
  • HTML ; 中使用的标签标签。它是使用 .. 定义的HTML 中的标签。
<body>
<p> <font size="2" color="blue" face="Calibri"> </font>
</p>
</body>
登录后复制

该标签也支持全局和事件属性。此外,它还支持一些其他属性,如下所示:

Attribute Name Detail Description
Size This attribute is used to define a specific size for text in between 1 to 7.
Face or type This attribute is used to define the font type for the included text.
Color This attribute is used to show enclosed text in a different color.
Weight This attribute defines the boldness of the text of the font tag.
属性名称

详细说明

尺寸 此属性用于定义 1 到 7 之间的特定文本大小。 脸部或文字 该属性用于定义所包含文本的字体类型。 颜色 此属性用于以不同的颜色显示封闭的文本。 粗细 该属性定义字体标签文本的粗体程度。 表> HTML 中的字体标签示例

字体标签在 HTML 代码中可以通过两种方式使用,第一种是通过 HTML 包含字体标签及其属性值,第二种是使用定义属性值作为 CSS 代码。两者都会产生相同的输出。唯一的区别在于定义属性值。

示例#1

定义字体标签及其属性值:

<!DOCTYPE html>
<html>
<head>
<title>Font Tag in HTML</title>
</head>
<body>
<h2>Example of  Font Tag in HTML </h2>
<p>General  text  without any Font tag attribute value</p>
<p>
<font color="orange">Text having normal font size and font face . Only changing
font   color  </font>
</p>
<p>
<font  face="cursive">Text having different font face.</font>
</p>
<p>
<font size="3">Text with Increased font size having default font type. </font>
</p>
</body>
</html>
登录后复制
代码:

输出:HTML 中的字体标签

示例#2

定义字体标签,其属性值通过CSS定义:

<!DOCTYPE html>
<html>
<head>
<title>Font Tag in HTML</title>
</head>
<body>
<h2>Example of Font Tag in HTML using CSS </h2>
<p>Someone’s sitting in the shade today because someone plated a tree a long time ago. </p>
<p style="color : lightgreen;"> Someone’s sitting in the shade today because someone plated a tree a long time ago.
</p>
<p style="font-family : Book Antiqua; color: blue; " > Someone’s sitting in the shade today because someone plated a tree a long time ago.
</p>
<p style="font size:3px;"> Someone’s sitting in the shade today because
someone plated a tree a long time ago.
</p>
</body>
</html>
登录后复制
代码:

输出:HTML 中的字体标签

示例#3

在此示例中,我们使用具有属性值 size 的 Font 标签,它将定义从最小尺寸到最大尺寸的文本,如下所示:

<!DOCTYPE html>
<html>
<head>
<title>HTML font tag</title>
</head>
<body>
<font size = "1">People may doubt what you say, but they will believe what you do.</font><br /> <br/>
<font size = "2">People may doubt what you say, but they will believe what you do.</font><br /> <br/>
<font size = "3">People may doubt what you say, but they will believe what you do.</font><br /> <br/>
<font size = "4">People may doubt what you say, but they will believe what you do.</font><br /> <br/>
<font size = "5">People may doubt what you say, but they will believe what you do.</font><br /> <br/>
<font size = "6">People may doubt what you say, but they will believe what you do.</font><br/><br/>
<font size = "7">People may doubt what you say, but they will believe what you do.</font>
</body>
</html>
登录后复制
HTML 代码:

输出:HTML 中的字体标签

示例#4

<!DOCTYPE html>
<html>
<head>
<title>HTML tag with Font Type attribute</title>
</head>
<body>
<font face = "Comic sans MS"> Correct one fault at a time. Concentrate on the one fault you want to overcome.</font><br/>
<font face = "Bernard MT Condensed" color="Red" >Correct one fault at a time. Concentrate on the one fault you want to overcome. </font><br/>
<font face = "Algerian">Correct one fault at a time. Concentrate on the one fault you want to overcome. </font><br/>
<font face = "Book Antiqua" size="5">Correct one fault at a time. Concentrate on the one fault you want to overcome. </font><br/>
<font face = "Aharoni"> Correct one fault at a time. Concentrate on the one fault you want to overcome.</font><br/>
<font face = "AR BERKLEY" >Correct one fault at a time. Concentrate on the one fault you want to overcome. </font><br/>
</body>
</html>
登录后复制
HTML 代码:

输出:HTML 中的字体标签

示例#5

<!DOCTYPE html>
<html>
<head>
<title>HTML Font tag-Color </title>
</head>
<body>
<font color = "#cc0066"><b>It is terrible thing to see and have no vision</b></font><br>
<font color = "#66ff33"><b>Today's preparation </b></font> <br>
<font color = "#0000cc"><strong>Success depends on your backbone not your wishbone.</strong></font><br />
<font color = "#cc3300"><b>Patience makes lighter what sorrow may not heal</b></font>  <br>
<font color = "#666600"><b>Hold fast to dreams, for if dreams die, life is broken winged bird that cannot fly </b></font> <br>
</body>
</html>
登录后复制
HTML 代码:

输出:HTML 中的字体标签

  • 结论
  • 用于以相同大小、颜色和面格式显示文本。字体标签将通过使用 .. 显示。标签。
通过以上信息,我们知道大小、字型、颜色是字体样式的关键属性。

以上是HTML 中的字体标签的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板