メインメニュー


[スポンサードリンク]


フォントの種類を指定する
font-family:フォント名, フォント名, フォント名, …

フォント名:
フォント名
フォントファミリー名
キーワード

font-familyプロパティで、フォント名を指定します。
フォント名は一つでも指定できますが、複数指定する場合は「,」で区切って指定します。
この場合、左側に書かれているフォント名が優先され、ユーザーのブラウザで表示が可能なものが採用されます。
ただし、ページを見る人の環境によっては指定されたフォントが一つもインストールされていない場合もあるので、必ずしも制作者側が指定したフォントで表示されるとは限りません。
指定されたフォントが存在しない場合は、ブラウザがそれに似たフォントを割り当てます。
また、WindowsやMacなどのOSによってもインストールされているフォントが違います。
Windowsには「Osaka」や「Osaka-等幅」などはインストールされていませんし、Macには「MS UI Gothic」や「MS ゴシック」など"MS"の付くフォントなどはインストールされていません。

フォント名で指定する場合
フォント名で指定します。
フォント名は全角・半角、スペースなど正確に記述する必要があります。
MS UI Gothic :全て半角で記述します。大文字や小文字も正確に記述し、半角のスペースを入れます。
MS ゴシック :「MS」は全角の大文字、半角のスペースを入れ、「ゴシック」は全角のカタカナです。
また、フォント名の中にスペースがある場合は、フォント名の前後を「"」または「'」で囲んで指定します。

フォントファミリーで指定する場合
フォントファミリーは、一つのフォントに対して太字や斜体など、あらかじめ別々のデザインを用意しておくものです。
このことにより、より美しい表示や印刷が可能になります。

例えば、「Times New Roman」というフォントファミリーを例にしてみます。
このフォントファミリーに属するフォントは以下の4種類あります。
 ・Times New Roman
 ・Times New Roman Bold
 ・Times New Roman Italic
 ・Times New Roman Bold Italic
文字に対して、「Times New Roman」を指定したとき、
太字にすると「Times New Roman Bold」が適用され、
斜体にすると「Times New Roman Italic」が適用され、
太字&斜体にすると「Times New Roman Bold Italic」が適用されることになります。
太字や斜体の指定がない場合は、「Times New Roman」が適用されます。

キーワードで指定する場合
キーワードは、フォントの種類をあらわします。
・serif 明朝系 Times New RomanGaramondMS Georgia
MS P明朝
・sans-serif ゴシック系 HelveticaArialVerdana
MS PゴシックOsaka
・cursive 草書体・筆記体系  Caflisch Scriptex pontoAdobe Poetica
・fantasy 装飾されたフォント CritterCottonwoodstudz
・monospace  等幅フォント CourierMS Courier NewMS ゴシック
Osaka-等幅


HTMLのタグでフォントを指定するときは、
<FONT face="フォント名,フォント名,…"> 〜 </FONT>といった形で、全体を「"」で囲みます。
CSSのfont-familyプロパティでフォントを指定する場合は、フォント名の中にスペースがあるフォントだけを「"」で囲みます。
指定の仕方が微妙に違うので間違えないように気をつけてくださいね。


フォント名=Comic Sans MS

フォントファミリー名=Times New Roman

キーワード=monospace


<STYLE type="text/css">
<!--
.case1 { font-family:"Comic Sans MS",sans-serif }
.case2 { font-family:"Times New Roman",serif }
.case3 { font-family:monospace }
-->
</STYLE>

<P class="case1">フォント名=Comic Sans MS</P>
<P class="case2">フォントファミリー名=Times New Roman</P>
<P class="case3">キーワード=monospace</P>