FONT は駄目?

FONT 要素

FONT は Netscape 独自拡張として生まれ、HTML3.2 で採用された要素です。size, color 属性でそれぞれフォントの大きさと色とを指定することが出来ます。Microsoft 社はさらに face 属性を拡張し、フォント名を指定出来るようにしました。これは HTML4.0 Transitional で採用されています。

たとえば以下のようにして使います。

<FONT color="#FF0000">赤い文字でございます。</FONT>
<FONT size="7">サイズ7の文字</FONT>や<FONT size="1">サイズ1の文字</FONT>
すこし<FONT size="+1">大きめ</FONT>や<FONT size="-1">小さめ</FONT>の文字
<FONT face="MS 明朝">WORDの好きなMS明朝の文字</FONT>

一見、非常に便利です。そして現に、数多くのサイトで数多く使われています。しかしながら、この要素は HTML4.0 で非推奨とされました。

なぜこんな便利な要素が非推奨なのでしょうか。この要素を使うことにどんな弊害があるのでしょうか?

物理マークアップの弊害

FONT 要素は物理要素です。

物理要素とは、たとえば B(太字) や I(斜体) のような要素を指します。それに対して EM(強調) や STRONG(より強い強調) などを論理要素と言います。

HTML においては、物理要素よりも論理要素を使うべきです。

たとえば、「強調」という指示は、太字で表現する、斜体にする、下線をつける、色を変える、文字を大きくする、声の調子を変える、など様々な方法で伝達可能です。EM が斜体で表現されるのが読みにくいと感じたユーザーは、その表現を斜体から太字に変えることが出来ます。

ところが B や I によるマークアップでは、それが出来ません。それは強調かもしれませんし、引用なのかも、覚え書きなのかもしれません。何の意味なのか分からないので、他の方法で伝達しようとすると意味を損なってしまうおそれがあります。ですから、基本的に B や I は太字や斜体を表現できない環境では再現することが出来ません。

もっとも、開き直って B や I をそれぞれ STRONG や EM と見なしてしまうことは可能です。音声環境ではそのようにしている場合が多いでしょう。

要するに、物理要素は環境に依存しやすく、融通が利かないのです。

FONT は B や I よりもはるかに悪質です。size 属性や color 属性の指定は、等幅文字しか表示できない環境や、白黒画面、音声再生、などで再現する方法が全くありません。

<FONT color="#FF0033">1998/9/27</FONT>
<FONT color="#CC0000">混ぜないように。</FONT>
<FONT color="#9933FF">混ぜると……</FONT>

色が再現できない環境では、これらをどんな方法で表現したらいいのでしょうか。前二つを強調して後ろの一つを無視すればいいのでしょうか? 見当もつきません。

同じ色を表現するのにも、スタイルシートを使って次のようにマーク付けすれば……

SPAN.sunday {color: #F03}
STRONG.alert {color: #C00}
SPAN.note {color: #93F}

……

<SPAN class="sunday">1998/9/27</SPAN>
<STRONG class="alert">混ぜないように。</STRONG>
<SPAN class="note">混ぜると……</SPAN>

マーク付けの趣旨を知ることが出来ます。最初のものは日曜日だから、という理由で赤くしているのですから地の文と同じでかまいませんし、次のものは警告ですから強調する必要があります。最後のものはメモですから地の文と同じか、すこし弱めて表現すれば良いでしょう。

二番目のものが STRONG でマーク付けされているのがミソです。これを FONT で代替してはいけません。

スタイルシートとの親和性のなさ

さらにまずいのは、FONT 要素とユーザースタイルシートとの親和性がないことです。以下の例を見てください。

地の文より<BIG>やや大きい</BIG>文字と、
<BIG><BIG>もう少し大きい文字</BIG></BIG>
<SMALL>小さい文字</SMALL>もよろしく。

この例では、BIG と SMALL を使って文字サイズを変更しています。

ここで、画面サイズの小さい環境の人が、こう考えたとしましょう。

「文字サイズの差が大きすぎて読みにくい。もっと文字サイズの差を小さくしたい」

その望みを叶えるのは簡単です。このようなユーザースタイルシートを使えば良いのです。

BIG {font-size: 105%}
SMALL {font-size: 95%}

これで文字サイズの差は小さくなって、小さい画面でも読みやすくなるでしょう。逆にコントラストをはっきりさせることもできます。

BIG {font-size: 200%}
SMALL {font-size: 50%}

これらのユーザースタイルシートを適用するだけで、ユーザーは自分の好みや環境に合わせた快適な環境で読むことが出来るのです。

このようにユーザースタイルシートは大変すばらしいものです。現在のところ、Windows版の MSIE4.0 以上がユーザースタイルシートに対応しています。ユーザースタイルシート対応のブラウザは、これからも増えて行くでしょう。

ところが、同じものを FONT 要素で表現すると……。

地の文より<FONT size="+1">やや大きい</FONT>文字と、
<FONT size="+2">もう少し大きい文字</FONT>
<FONT size="-1">小さい文字</FONT>もよろしく。

これは困ったことになります。同じ FONT 要素が全く違った意味で使われているため、CSS1 のユーザースタイルシートでは対処のしようがありません。CSS2 では可能ですが、

FONT[size=+1]{font-size: 105%}
FONT[size=+2]{font-size: 110%}
FONT[size=+3]{font-size: 116%}
FONT[size=+4]{font-size: 122%}
FONT[size=-1]{font-size: 95%}
FONT[size=-2]{font-size: 90%}

と、このように指定しなければなりません(BASEFONT 要素が使われていれば、もっとたくさん指定する必要があります)。たいへん面倒ですし、スタイルシートの見通しも悪くなります。ついでに言えば、現時点で対応しているブラウザは存在しません。

このように、FONT 要素は大変扱いにくいものです。BIG や SMALL を使った方が融通が利くということが分かるでしょう。

以上はサイズの例ですが、色指定に至ってはもう完全にお手上げです。たとえば、色弱の人が自分に読みやすいように色を変えたいとき、どんなユーザースタイルシートを使えば良いのでしょうか? 無数に存在する色指定のそれぞれに対して代替色を指定するなどというのは不可能です。結局、すべての色指定を破棄するしかなくなってしまいます。

結論

FONT 要素は色やサイズが再生できない環境での代替方法がありませんし、ユーザースタイルシートとの相性も大変悪いものです。環境に強く依存し、融通の利かない不便な要素です。

ですから、今後 HTML 文書を作成する人は、この要素を出来る限り使わないようにしたほうが良いでしょう。

けれど、ちょっとアドバイス

しかし、どうしても FONT 要素を使いたいときがあるかもしれません。

たとえば、文字に虹のグラデーションをつけたくなることがあるでしょう。たとえばこんな風に。

虹の
<FONT color="#ff0000">グ</FONT>
<FONT color="#ff9900">ラ</FONT>
<FONT color="#ffff00">デ</FONT>
<FONT color="#00ff00">ー</FONT>
<FONT color="#0000ff">シ</FONT>
<FONT color="#000080">ョ</FONT>
<FONT color="#800080">ン</FONT>
を使ってみました。

これは 現在の CSS では代替できません。FONT を <SPAN style="color:"> に置き換えることで代替できると思うかもしれませんが、そんなマーク付けをするくらいなら FONT を使った方が早いでしょう(HTML4.0Strict の DOCTYPE を宣言しているときは SPAN を使うしかないでしょうが)。

ですが、前述のように、FONT を単独で使うのはよくありません。どうしても FONT を使いたいなら、せめて以下のようにしてください。

虹の
<SPAN class="rainbowsample">
<FONT color="#ff0000">グ</FONT>
<FONT color="#ff9900">ラ</FONT>
<FONT color="#ffff00">デ</FONT>
<FONT color="#00ff00">ー</FONT>
<FONT color="#0000ff">シ</FONT>
<FONT color="#000080">ョ</FONT>
<FONT color="#800080">ン</FONT>
</SPAN>
を使ってみました。

グラデーション全体が SPAN でマーク付けされています。これによって、「グラデーション」という文字列そのものに何らかの意味が与えられるわけです。

グラデーションが強調の目的で使われているのなら、SPAN ではなく EM や STRONG を使いましょう。このように、FONT を単独ではなく、他の要素を補完する形で使うのであれば、その弊害は最小限に押さえられます。前に出てきた例も、

<FONT color="#FF0033">1998/9/27</FONT>
<STRONG><FONT color="#CC0000">混ぜないように。</FONT></STRONG>
<FONT color="#9933FF">混ぜると……</FONT>

のようにしておけば、色の再現できない環境でも二番目のものが強調されることになります。FONT を STRONG の代わりに使うのではなく、STRONG と併せて使うことで、FONTの再現できない環境でもある程度の情報を伝えることが出来るのです。


HTMLのポリシー

HTML鳩丸倶楽部

水無月ばけら, MINAZUKI Bakera
E-mail: bakera@star.email.ne.jp