文字の種類を変更する

HTMLを使用した記述方法

記述方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<p><font face="ＭＳ Ｐ明朝">ＭＳ Ｐ明朝</font></p>
<p><font face="ＭＳ Ｐゴシック">ＭＳ Ｐゴシック</font></p>
<p><font face="HG丸ｺﾞｼｯｸM-PRO">HG丸ｺﾞｼｯｸM-PRO</font></p>
<p><font face="Comic Sans MS">Comic Sans MS</font></p>
<p><font face="Westminster">Westminster</font></p>
<p><font face="Lucida Sans">Lucida Sans</font></p>
</body>
</html>

表示サンプル

ＭＳＰ明朝

ＭＳＰゴシック

HG丸ｺﾞｼｯｸM-PRO

Comic Sans MS

Westminster

Lucida Sans

解説

文字の種類を変えたい部分を「」と「」で囲みます。フォント名は、全角半角、大文字小文字をすべて正しく記入しないと結果に反映されません。また、フォント名にスペースが入る場合は半角のスペースを入れなければなりません。これもまた全角ですと結果に反映されませんので注意が必要です。

さらに、ページを見てくれる人のパソコンに指定されたフォントがない場合、この指定は無視されます（指定が無視されるだけで表示されないわけではありません）。複数の文字種類を指定したい場合は次のように半角カンマ区切りで記述します。

この場合、先に記述した文字種類が優先されます。

ＣＳＳを使用した記述方法

記述方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
<!--
p.typeA { font-family: "ＭＳ 明朝",serif; }
p.typeB { font-family: Verdana,Arial,"ＭＳ Ｐゴシック",Osaka; }
p.typeC { font-family: sans-serif; }
p.typeD { font-family: serif; }
p.typeE { font-family: cursive; }
p.typeF { font-family: fantasy; }
p.typeG { font-family: monospace; }
-->
</style>
</head>
<body>
<p class="typeA">表示Ａ</p>
<p class="typeB">表示Ｂ</p>
<p class="typeC">表示Ｃ</p>
<p class="typeD">表示Ｄ</p>
<p class="typeE">表示Ｅ</p>
<p class="typeF">表示Ｆ</p>
<p class="typeG">表示Ｇ</p>
</body>
</html>

表示サンプル

表示Ａ

表示Ｂ

表示Ｃ

表示Ｄ

表示Ｅ

表示Ｆ

表示Ｇ

解説

ヘッダ内の記述にて、「P」タグの「typeA」「typeB」…（名前は自由に付けてください）と言う名前のものに関しての表示方法を指定しています。それぞれ個別に、

ここの文字種類が変更されます

のように記述をすることも出来ます。カンマで区切って複数の候補を並べることもできます（先に記述したものが優先されます）。指定したフォントが見る人の環境にインストールされていない場合は、ブラウザで設定されたデフォルトフォントが表示されます。

指定方法としてはフォント名を直接指定する方法とキーワードで指定する方法があります。フォント名で指定する場合は｢ＭＳゴシック｣や｢ＭＳ明朝｣などなど直接名前で指定し、フォント名にスペースが含まれている場合はダブルクォーテーションかシングルクォーテーションで囲みます。キーワードで指定する場合は以下のキーワードを使うことができます。

sans-serif：ゴシック系のフォント
serif：明朝系のフォント
cursive：筆記体・草書体のフォント
fantasy：装飾的なフォント
monospace：等幅フォント