HTML-フォント

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

フォントタグには、フォントをカスタマイズするために size、color 、 face という3つの属性があります。ウェブページ内でいつでもフォント属性を変更するには、単にタグを使用します。 タグで閉じるまで、後続のテキストは変更されたままになります。 1つのタグ内で1つまたはすべてのフォント属性を変更できます。

'_注-_font_および_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_属性を使用してフォントフェースを設定できますが、ページを表示しているユーザーにフォントがインストールされていない場合、フォントを表示できないことに注意してください。代わりに、ユーザーには、ユーザーのコンピューターに適用できるデフォルトのフォントが表示されます。

例

<!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 New Roman_が表示されます。

注意-リンクの完全なリストを確認してください：/html/html_fonts_ref [* HTML標準フォント*]。

フォントの色を設定する

_color_属性を使用して、好きなフォントの色を設定できます。色の名前またはその色の16進コードのいずれかで、希望する色を指定できます。

注意-リンクの完全なリストを確認できます：/html/html_color_names [コード付きの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>

これは、次の結果を生成します-

<basefont>要素

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

<basefont>タグも色、サイズ、および顔の属性を取り、大きいサイズの場合はサイズに＆plus; 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>

これは、次の結果を生成します-

Html-fonts

HTML-フォント

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

例

相対フォントサイズ

例

フォントフェイスの設定

例

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

フォントの色を設定する

例

<basefont>要素

例

目次