HTML STUDY
>
>

書体を設定する

ここではCSSで書体の種類を設定していく方法を解説していきます。書体の種類には大きく５つに分かれておりsans-serif、serif、monospace、fantasy、cursiveなどがあります。詳しくは「フォントサンプル」をご覧ください。

font-family

CSSプロパティfont-familyはフォントの種類を設定することができます。ブラウザに搭載されているフォントであるなら、指定したものに変わりますが、搭載されていなければ変更されないことに注意しましょう。いくら凝ったデザインで時間をかけてサイトを作っても、閲覧する側に反映されなければ無駄なものになってしまいます。

指定したフォントがなかった場合のために、複数のフォントをカンマを入れて入力しておきます。またフォント名に空白がある場合は引用符の(")か(')で囲みます。

ブラウザによりsans-serif、serif、monospace、fantasy、cursiveについてはキーワードとなるので、引用符で囲む必要はありません。

例： font-family: "メイリオ", Meiryo, "MS Pゴシック", sans-serif;

要素解説
<p>ひと段落
CSSプロパティ解説
font-family文字の種類

HTMLコード記述例

<p class="font-sample1">Century Gothic ABCDE</p>
<p class="font-sample2">HG行書体 ABCDE</p>
<p class="font-sample3">Monotype Corsiva ABCDE</p>

外部ファイルCSS記述例

@charset "utf-8";

p.font-sample1 { font-family: Century Gothic, sans-serif;}
p.font-sample2 { font-family: "HG行書体", monospace;}
p.font-sample3 { font-family: Monotype Corsiva, fantasy;}

ブラウザ表示例

Century Gothic ABCDE

HG行書体 ABCDE

Monotype Corsiva ABCDE

CSS文字 関連記事