　フォントを指定する

■	font-family:

指定できる値

フォントの名前で指定

Arial BlackやＭＳＰ明朝など

フォントカテゴリ名で指定

serif sans-serif cursive fantasy monospace

フォント名を指定するには、font-familyプロパティを使います。
値には、フォントの名前やフォントカテゴリ名を指定します。まず、フォントの名前で指定する場合についてですが、「Arial Black」や「Times New Roman」などのフォント名を大文字小文字、半角のスペースを正確に記述しましょう。
「ＭＳＰ明朝」などの日本語のフォント名でスペースがあるものも、全角のスペースではなくて半角のスペースを記入して下さい。フォント名に半角のスペースが含まれる場合は、フォント名をダブルクォーテーション（”）かシングルクォーテーション（’）で囲む必要があります。

つぎに、フォントカテゴリ名での指定ですが、「sans-serif」などの5つの種類があります。
これは、フォントの特長ごとに種類分けされたキーワードで、フォントを大まかに指定することが出来ます。
例えば、「sans-serif」で指定すると、ゴシック体によく似たフォントで表示されます。フォントカテゴリ名でフォントを指定する場合は、ダブルクォーテーション（”）は、必要ありません。
もし囲むとフォント名とブラウザが勘違いしてしまい、正しく表示されません。この指定方法は、NNでは動作しない場合もあります。

serif 線の太さの強弱が大きいフォント Times New Roman Bitstream Cyberbit

sans-serif 線の太さの強弱が小さいフォント MS Arial Futura

cursive 筆記体的なフォント Ex Ponto Zapf-Chancery

fantasy 装飾的なフォント Critter Cottonwood

monospace 等幅のフォント Courier Prestige

serif	線の太さの強弱が大きいフォント	Times New Roman	Bitstream Cyberbit
sans-serif	線の太さの強弱が小さいフォント	MS Arial	Futura
cursive	筆記体的なフォント	Ex Ponto	Zapf-Chancery
fantasy	装飾的なフォント	Critter	Cottonwood
monospace	等幅のフォント	Courier	Prestige

フォントの指定は、font-family:まず表示させたいフォント,次に表示させたいフォント、というように「,」コンマで区切ることで、複数指定することが出来ます。
ここでは、フォントの指定方法を説明してきましたが、ページを見る人のOSやブラウザ、インストールされているフォントなどにより、意図したとおりの表示が出来ない場合もあリます。

サンプル - Microsoft Internet Explorer

Arial Blackです。

ＭＳＰ明朝です。

serifです。

sans-serifです。

cursiveです。

fantasyです。

monospaceです。

ソース

<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
<STYLE type="text/css">
<!--
 BODY    {font-size:20pt;  }
.test1  { font-family:"Arial Black"; }
.test2  { font-family:"ＭＳ Ｐ明朝"; }
.test3  { font-family:serif;      }
.test4  { font-family:sans-serif; }
.test5  { font-family:cursive;    }
.TEST6  { font-family:fantasy;    }
.TEST7  { font-family:monospace;  }
-->
</STYLE>
</HEAD>
<BODY>
<P class="test1">Arial Blackです。</P>
<P class="test2">ＭＳ Ｐ明朝です。</P>
<P class="test3">serifです。</P>
<P class="test4">sans-serifです。</P>
<P class="test5">cursiveです。</P>
<P class="TEST6">fantasyです。</P>
<P class="TEST7">monospaceです。</P>
</BODY>
</HTML>

HOME >>スタイルシート

次のページ >>