HTMLのフォントタグ-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTMLのフォントタグ

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:27 PM

html html5 HTML Tutorial HTML Properties HTML tags

HTML のフォントタグは、Web ページや HTML ドキュメントをより魅力的にするために使用される最も重要な属性の 1 つです。含まれるテキストのサイズ、色、スタイルを変更するプロパティがあります。フォントタグを使用すると、Web ページのサイズ、色、文字面を同じテキスト形式で作成できます。このタグは主に、サイズ、顔またはタイプ、色などの 3 つの主要な属性に対して機能します。 Font タグは、HTML のインライン要素として機能し、HTML ドキュメント内のブロックテキストの一部の機能を変更します。で囲まれたテキストタグは、それに含まれるテキストのスタイルを定義するために使用されます。

構文:

<font size =" " face =" " color=" ">

ログイン後にコピー

フォントサイズが構文の属性である上記の構文ステータスは、テキストに特定のサイズを設定するために使用されます。このサイズは 1 ～ 7 の数値で定義できます。1 は最小のテキストサイズ、7 は最大のテキストサイズです。 font タグの 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 の Font タグの例

Font タグは HTML コードで 2 つの方法で使用できます。1 つは HTML を通じて font タグとその属性値を含める方法、もう 1 つは 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

この例では、属性値のサイズを持つ 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のフォントタグ