HOME >> スタイルシート > フォントを指定する

point フォントを指定する

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

つぎに、フォントカテゴリ名での指定ですが、「sans-serif」などの5つの種類があります。
これは、フォントの特長ごとに種類分けされたキーワードで、フォントを大まかに指定することが出来ます。
例えば、「sans-serif」で指定すると、ゴシック体によく似たフォントで表示されます。フォントカテゴリ名でフォントを指定する場合は、ダブルクォーテーション(”)は、必要ありません。
もし囲むとフォント名とブラウザが勘違いしてしまい、正しく表示されません。この指定方法は、NNでは動作しない場合もあります。
serif線の太さの強弱が大きいフォントTimes New RomanBitstream Cyberbit
sans-serif線の太さの強弱が小さいフォントMS ArialFutura
cursive筆記体的なフォントEx PontoZapf-Chancery
fantasy装飾的なフォントCritterCottonwood
monospace等幅のフォントCourierPrestige

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

サンプル - Microsoft Internet Explorer
ホーム(H)メニュー(M)戻る(B)進む(N)

Arial Blackです。

MS P明朝です。

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:"MS P明朝"; }
.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">MS P明朝です。</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> 
Copyright ©2001〜2011 まさぼ〜 All Right Reserved