フォント

フォントを変更するには、 を用います。

<font face="ＭＳ 明朝">明朝体の文字</font>

カンマ(,)で複数のフォントを指定すると、一つ目のフォントが無ければ二つ目の、二つ目が無ければ三つ目のフォント・・・が採用されます。

<font face="ＭＳ 明朝, 平成明朝, serif">明朝体の文字</font>

ページ全体のフォントを変更するには <basefont face="..."> を用います。<basefont> は <head>～</head> の間ではなく、<body>～</body> の間に記述します。

<html>
<head>
<title>テスト</title>
</head>
<body>
<basefont face="ＭＳ 明朝">
  :
</body>
</html>

スタイルシートの場合は font-family を用います。スペースを含むフォント名の場合は、フォント名を '...' で囲むようにしましょう。

<span style="font-family:'ＭＳ 明朝'">明朝体の文字</span>

指定可能なフォント名は「フォントの一覧」を参照してください。

■ 文字のサイズを変えるには

文字のサイズを変えるには、 を用います。n には 1～7 を指定します。通常の大きさは 3で、小さな数字は小さな文字、大きな数字は大きな文字になります。

<font size=7>大きな文字</font>

n に +2 を指定すると現在の大きさよりも 2段階大きな文字、-2 を指定すると現在の大きさよりも 2段階小さな文字になります。-2 は "..." で囲む必要があります。

<font size="-2">2段階小さな文字></font>

スタイルシートの場合は font-size を用います。サイズには 200% のようなパーセント表示や、10pt や 1.5em のような長さや、large のような相対的な大きさを指定します。詳細は font-size を参照してください。

<span style="font-size: 200%">2倍の文字</span>

■ 文字の大きさを固定するには

画像の大きさに合わせて、文字の大きさを固定したいこともありますが、なかなか難しいようです。Internet Explorer 6.0 では、font-size に in、cm、mm、pt、pc などの絶対単位指定、および px のピクセル指定の単位を用いることにより、固定することができます。

<span style="font-size: 40px">固定の大きさ</span>

Netscape 4.* の場合は、px のみが固定となります。Netscape 6.*/7.* の場合は、どの単位を指定しても、固定することができません。Opera 6.0 の場合は特殊で、どの単位を指定しても画像の大きさとフォントの大きさの比率が固定され、フォントを小さくすると画像も小さくなります。

注意したいのはアクセシビリティの問題です。目が弱くて大きなフォントで読んでいる人にとっては、画像で貼り付けたフォントや固定された大きさのフォントは読みづらいことが多いからです。多くの場合、大きさを変更しない既定値のままのフォントサイズが、読む人にとって最も読みやすいフォントサイズになっていることを忘れないでください。

■ 太字にするには

太字にするには、 を用います。

<b>太い文字</b>

スタイルシートの場合は font-weight を用います。

<span style="font-weight:bold">太い文字</span>

太字にする目的が「強調」であれば、 ではなく を用いることが推奨されています。ブラウザによっては色を変えるなど、太字以外の手段で表現されることもあります。

<strong>強調された文字</strong>

■ 斜体にするには

斜体にするには、 を用います。

<i>斜体文字</i>

スタイルシートの場合は font-style を用います。

<span style="font-style:italic">斜体文字</span>

斜体にする目的が「強調」であれば、 ではなく を用いることが推奨されています。ブラウザによっては色を変えるなど、斜体以外の手段で表現されることもあります。

<em>強調された文字</em>

■ 下線を引くには

下線を引くには を用います。

<u>下線文字</u>

スタイルシートの場合は text-decoration を用います。

<span style="text-decoration:underline">下線文字</span>

■ 点線の下線を引くには

■ 取り消し線（打ち消し線）を引くには

取り消し線（打ち消し線）を引くには　<s> や <strike> や <del> を用います。<del> は Netscape 4.* でサポートされていないので注意してください。

<s>取り消し線</s>
<strike>取り消し線</strike>
<del>取り消し線</del>

スタイルシートの場合は text-decoration を用います。

<span style="text-decoration:line-through">取り消し線</span>

■ 文字を点滅させるには

文字を点滅させるには <blink> タグがありますが、Netscape ブラウザでしかサポートされていません。

<blink>この部分の文字が点滅します</blink>

Internet Explorer（IE4.0 以降）でも点滅を実現するには、下記のようにします。

<html>
<head>
<title>点滅サンプル</title>
<script type="text/javascript">
<!--
function blink() {
  if (!document.all) { return; }
  for (i = 0; i < document.all.length; i++) {
    obj = document.all(i);
    if (obj.className == "blink") {
      if (obj.style.visibility == "visible") {
        obj.style.visibility = "hidden";
      } else {
        obj.style.visibility = "visible";
      }
    }
  }
  setTimeout("blink()", 800);
}
// -->
</script>
</head>
<body onload="blink()">
<div>これは普通の文書</div>
<div class="blink">これは点滅する文章</div>
</body>
</html>