首頁  >  文章  >  web前端  >  HTML 中的字型標籤

HTML 中的字型標籤

WBOY
WBOY原創
2024-09-04 16:27:51215瀏覽

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn