CSS Web セーフフォントの組合せ

❮ 前章へ 次のリファレンス ❯

一般的に使用するフォントの組合せ

font-family プロパティは、ブラウザ/オペレーティングシステム間で最大の互換性を保つために、 "fallback" システムとして、複数のフォント名がなければなりません。 ブラウザは、最初のフォントをサポートしていない場合、次のフォントを試します。

使用したいフォントから始めて、他のフォントが使用できない場合、 ブラウザが総称ファミリ(generic family)から同様なフォントを選択できるように、総称ファミリ名で終わってください:

p {
    font-family: "Times New Roman", Times, serif;
}
Try it Yourself ❯

下は、総称ファミリで構成した、一般的に使用されるフォントの組み合わせです。


Serif フォント

フォントファミリ テキストの例
Georgia, serif

This is a heading

This is a paragraph

"Palatino Linotype", "Book Antiqua", Palatino, serif

This is a heading

This is a paragraph

"Times New Roman", Times, serif

This is a heading

This is a paragraph

Sans-Serif フォント

フォントファミリ テキストの例
Arial, Helvetica, sans-serif

This is a heading

This is a paragraph

"Arial Black", Gadget, sans-serif

This is a heading

This is a paragraph

"Comic Sans MS", cursive, sans-serif

This is a heading

This is a paragraph

Impact, Charcoal, sans-serif

This is a heading

This is a paragraph

"Lucida Sans Unicode", "Lucida Grande", sans-serif

This is a heading

This is a paragraph

Tahoma, Geneva, sans-serif

This is a heading

This is a paragraph

"Trebuchet MS", Helvetica, sans-serif

This is a heading

This is a paragraph

Verdana, Geneva, sans-serif

This is a heading

This is a paragraph

Monospace フォント

フォントファミリ テキストの例
"Courier New", Courier, monospace

This is a heading

This is a paragraph

"Lucida Console", Monaco, monospace

This is a heading

This is a paragraph


❮ 前章へ 次のリファレンス ❯