font-family(フォントファミリ)の種類について
CSSでは指定したフォントファミリがインストールされていない環境を想定して、
複数のフォントファミリを「,」で区切って指定することが出来ます。
font-family: 'family-name','family-name',generic-family;
以下の場合はGeorgaの順から読み込まれ、
GeorgaとＭＳ ゴシックが対応していない場合は最終的にserifに関連したフォントが使われます。
font-family: Georgia,"ＭＳ ゴシック",serif;
まずはどのブラウザでも表示されやすい5つの一般フォントファミリのgeneric-familyをご紹介します。
font-fmailyリストの最後には、指定した全てのフォントが対応していない場合に備えて、以下の一般フォントファミリの指定が推奨されています。
ちなみに当サイトのフォントファミリは以下になります。
font-family: Verdana, "ＭＳ Ｐゴシック", sans-serif;
Verdanaは英数字で一番読みやすいらしいので使っています。
実際読みやすくないですか？？
serif (明朝系)
- ■CSS記述
font-family: serif;
ＡＢＣ ABC ａｂｃ abc サンプル 見本
sans-serif (ゴシック系)
- ■CSS記述
font-family: sans-serif;
ＡＢＣ ABC ａｂｃ abc サンプル 見本
cursive (筆記体系)
- ■CSS記述
font-family: cursive;
ＡＢＣ ABC ａｂｃ abc サンプル 見本
fantasy (装飾体系)
- ■CSS記述
font-family: fantasy;
ＡＢＣ ABC ａｂｃ abc サンプル 見本
monospace (等幅系)
- ■CSS記述
font-family: monospace;
ＡＢＣ ABC ａｂｃ abc サンプル 見本
windows日本語フォントファミリ
windows用の日本語フォントファミリです。
ＭＳ Ｐゴシック
- ■CSS記述
font-family: "ＭＳ Ｐゴシック";
ＡＢＣ ABC ａｂｃ abc サンプル 見本
ＭＳ ゴシック
- ■CSS記述
font-family: "ＭＳ ゴシック";
ＡＢＣ ABC ａｂｃ abc サンプル 見本
ＭＳ Ｐ明朝
- ■CSS記述
font-family: "ＭＳ Ｐ明朝";
ＡＢＣ ABC ａｂｃ abc サンプル 見本
ＭＳ 明朝
- ■CSS記述
font-family: "ＭＳ 明朝";
ＡＢＣ ABC ａｂｃ abc サンプル 見本
MS UI Gothic
- ■CSS記述
font-family: "MS UI Gothic";
ＡＢＣ ABC ａｂｃ abc サンプル 見本
MAC日本語フォントファミリ
MAC用の日本語フォントファミリです。
font-family: 'Osaka';
font-family: 'Osaka-等幅';
font-family: '平成明朝';
font-family: '細明朝体';
font-family: '中ゴシック体';
font-family: '平成角ゴシック';
その他のフォントファミリ
管理人が気になったフォントファミリのご紹介です。
その他のフォントファミリ
- ■CSS記述
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
ＡＢＣ ABC ａｂｃ abc サンプル 見本 ※これはVistaでしか見れません。
