<font> x - フォント　（廃止）

■ 概要

項　　目説　　明
記述形式 <font>～</font>
種　　類 インライン要素 （HTML4.01）

■ 解説

<font> ～ </font> の範囲の文字のフォントの種類，文字サイズ，色などを指定するタグです。

HTML5 では，廃止されたため，同様の機能の CSS の指定に置き換える必要があります。
（フォント・サイズ → font-sizeプロパティ，色 → colorプロパティ，フォントの名前 → font-familyプロパティ）

■ CSSスタイルシートによる代替方法（１）

<font> ～ </font> と同様に個別に指定するのであれば，次のように指定します。

フォントの種類
<span style="font-family: "ＭＳ 明朝",serif"> ～ </span>
フォントサイズ
<span style="font-size: large"> ～ </span>
フォントカラー
<span style="color: #ff0000"> ～ </span>

たとえば，以下のようになります。

HTMLソース
HTML
<body> ～ </body>		 
<span style="font-family: 'ＭＳ 明朝', serif">MS明朝</span><br>
<span style="font-size: large">サイズ大</span><br>
<span style="color: #ff0000">赤色</span><br>
<span style="font-size: large; color: #ff0000">赤色サイズ大</span>

ブラウザー 表示例
MS明朝
サイズ大
赤色
赤色サイズ大

■ CSSスタイルシートによる代替方法（２）

同じ指定を何度も行う場合には，つぎのようにします。

HTMLソース
CSS
<head> ～ </head>		 
<style type="text/css">
<!--
   span.ff1 { font-family: "ＭＳ 明朝",serif; }
   span.size5 { font-size: large; }
   span.color1 { color: #ff0000; }
   span.s5_c1 { font-size: large; color: #ff0000; }
-->
</style>
HTML
<body> ～ </body>		 
<span class="ff1">MS明朝</span><br>
<span class="size5">サイズ大</span><br>
<span class="color1">赤色</span><br>
<span class="s5_c1">赤色サイズ大</span>

ブラウザー 表示例
MS明朝
サイズ大
赤色
赤色サイズ大

■ 備考

上の例だけを見ると，２つの代替方法のうち，方法（１）の方が簡単に見えるかもしれません。　しかし，文書中で同じ指定をほとんど行わない場合は（１）でもよいのですが，同じ指定を何度も行うときは（２）方が向いています。　実際，定型の文書では文中に同じ指定が何度も現れるのが普通です。　この場合，指定の内容（たとえばフォントのサイズ）を変更するときには，（２）の方がずっと便利です。

さらに，方法（２）のCSS部分をHTML文書ファイル内ではなく，独立したスタイルシートのファイルに書くことも出来ます。

HTMLソース
<link rel="stylesheet" href="style.css">