フォントの名前と種類のスタイルを指定する

フォントは、文字を画面や印刷で表示する場合、どのように表示するかを規定するものです。

例えば、学と学は同じ文字ですが、フォントの種類が違っています。

左の学のフォントはstyle="font-family: serif;"で、
右のフォントはstyle="font-family: sans-serif;"と種類を指定して表示しています。

種類以外に、フォントの名前を指定することができます。実際に使えるフォント名は、オペレーティングシステムにインストールされるフォントのファイルによって決ります。
(現在使っているコンピュータで使える実際のフォント名は、java appletが動作可能の環境であれば、こちらでのページで確認できます。)
の変更で、それを使った時の表示を下で確認できます。
（ご使用のコンピュータに存在しない場合は正しく反映しなしでしょう。）

しかし、そのフォント名が、見ているマシンにあるとは限りません。
そこで、フォントの種類も次のように併用して指定するのがよいでしょう。
セレクタ名 { font-family: "フォント名",フォントの種類; }

これにより、指定のフォント名がそのコンピュータに存在しない場合でも、種類に対応したフォントがブラウザによって適当に選ばれます。

以下で、 "フォント名"を指定しない場合の例を示します。

ここで、フォントの種類による表示の違いをこれで確認できます。→
なお、フォントのスタイルもこれで指定できます。→
なお、フォントの太さの指定もあります。→

←このボタンをクリックして出現するWebページと同じように見えるHTMLを、以下を編集して作成しなさい。(htmlタグなど、小文字を使っても影響がない範囲で小文字を使ってください。)
違う所→head内bodyスタイルで、font-family: "ＭＳＰ明朝",serif; が抜けています。
（上記赤のスタイルをコピーして使うとよいでしょう）また <td> の代わりに<th>を使うべきころがあります。（th は、表のセルで見出しとなるような部分に指定するタグです。以下の実験で確かめてください）そして削除すべきスタイルのところがあります。

←上記で編集した内容を、ブラウザで確認するボタンです
上のボタンで確認した後、正しいと思ったら、下の評価ボタンをクリックください。

←目標と同じ結果が得られるように修正してからクリックください。　(分からない場合もクリックください)
←わからない場合は、クリックして覚え、再びチャレンジしましょう。

なお、Windowsの標準フォントであるＭＳゴシックやＭＳ明朝は等幅フォントに属します。
そして文字によって幅が変わるプロポーショナル(psroportional)フォントが、
ＭＳＰゴシックやＭＳＰ明朝になっています。