sans-serif、serif 以外にもあるCSSフォントファミリーのキーワード

CSSでフォントを指定するにはfont-familyプロパティを使用します。カンマで区切って複数のフォントを指定しておくと、1つ目から順に探して最初に見つかったフォントで表示されます。どれも見つからなかったときの保険として、必ず最後に一般的なフォントファミリーを指すキーワードを入れておきます。

5種類の一般フォントファミリーキーワード

特定のフォントではなく一般的なフォントの種類を指すキーワードには、sans-serif、serif、cursive、fantasy、monospaceの5種類があります。

sans-serif

欧文フォントでは「サンセリフ」を指すキーワードです。日本語では「ゴシック体」が該当します。

font-family: sans-serif;

serif

欧文フォントでは「セリフ」を指すキーワードです。日本語では「明朝体」が該当します。

font-family: serif;

cursive

手書き文字を指すキーワードです。欧文書体はOS、ブラウザによって表示するフォントが大きく異なります。また、日本語はこれに対応するフォントがなく、明朝体などで表示されます。使ってもあまり意味がないためほとんど使われません。

font-family: cursive;

fantasy

装飾書体を表すキーワードです。cursive同様、欧文書体はOS、ブラウザによって表示するフォントが大きく異なります。また、日本語はこれに対応するフォントがなく、ゴシック体などで表示されます。使ってもあまり意味がないためほとんど使われません。

font-family: fantasy;

monospace

san-serif、seif以外で唯一よく使われるのがmonospaceです。等幅フォントを指します。等幅フォントとは1文字1文字の横幅が同じに作られた書体です。プログラムのソースコードを表示するときなどによく使われます。

font-family: monospace;