HTML-フォント

フォントは、Webサイトをよりユーザーフレンドリーにし、コンテンツの読みやすさを向上させる上で非常に重要な役割を果たします。フォントフェースと色は、ページの表示に使用されているコンピューターとブラウザーに完全に依存しますが、HTMLを使用できます。タグを使用して、Webサイトのテキストにスタイル、サイズ、および色を追加します。あなたは使用することができます<basefont> タグを付けて、すべてのテキストを同じサイズ、顔、色に設定します。

フォントタグには、次の3つの属性があります。 size, color、および faceフォントをカスタマイズします。Webページ内でいつでもフォント属性を変更するには、タグを使用するだけです。次のテキストは、タグで閉じるまで変更されたままになります。1つのタグ内で1つまたはすべてのフォント属性を変更できます。

Note-TheフォントとBASEFONTタグが廃止され、HTMLの将来のバージョンでは削除されることになっています。したがって、それらを使用するのではなく、CSSスタイルを使用してフォントを操作することをお勧めします。ただし、学習を目的として、この章ではフォントタグとベースフォントタグについて詳しく説明します。

フォントサイズを設定する

を使用してコンテンツのフォントサイズを設定できます 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>

これにより、次の結果が生成されます-

相対フォントサイズ

プリセットフォントサイズよりも大きいサイズまたは小さいサイズを指定できます。あなたはそれを次のように指定することができます または 

例

<!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属性を使用してフォント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>

これにより、次の結果が生成されます-

代替フォントフェースを指定する

訪問者は、自分のコンピューターにフォントがインストールされている場合にのみ、そのフォントを見ることができます。したがって、フォントフェース名をコンマで区切ってリストすることにより、2つ以上のフォントフェースの選択肢を指定することができます。

<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">

ページが読み込まれると、ブラウザに最初に使用可能なフォントフェースが表示されます。指定されたフォントがインストールされていない場合は、デフォルトのフォントフェースであるTimes NewRomanが表示されます。

Note −の完全なリストを確認してください HTML Standard Fonts。

フォントの色を設定する

color属性を使用して、任意のフォントの色を設定できます。必要な色は、色名またはその色の16進コードのいずれかで指定できます。

Note −の完全なリストを確認できます HTML Color Name with Codes。

例

<!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>

これにより、次の結果が生成されます-

<basefont>要素

<basefont>要素は、タグに含まれていないドキュメントの部分のデフォルトのフォントサイズ、色、および書体を設定することになっています。要素を使用して、<basefont>設定を上書きできます。

<basefont>タグも色、サイズ、顔の属性を取り、サイズが大きい場合は+1、小さい場合は-2の値を指定することで、相対的なフォント設定をサポートします。

例

<!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 &lt;basefont&gt; 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>

これにより、次の結果が生成されます-