Font-Familyプロパティの構文
タイポグラフィデザインは、成功したウェブデザインの非常に重要な部分です。 見やすく見栄えのよいテキストを含むサイトを作成することは、すべてのウェブデザイン専門家の目標です。 これを実現するには、Webページで使用する特定のフォントを設定できる必要があります。 Webドキュメント上の書体またはフォントファミリを指定するには、CSSでfont-familyスタイルプロパティを使用します。
あなたが使うことができる最も簡単なフォントファミリスタイルには、1つのフォントファミリだけが含まれます：
p {font-family：Arial; }このスタイルをページに適用すると、すべての段落が「Arial」フォントファミリに表示されます。 これは素晴らしく、 "Arial"は "ウェブセーフフォント"として知られているため、ほとんどの（もしそうでないにしても）コンピュータにインストールされていれば、あなたのページが意図したフォントで表示されることをかなり簡単に知ることができます。
選択したフォントが見つからない場合はどうなりますか？ たとえば、ページ上に「Webセーフフォント」を使用しない場合、そのフォントを持たないユーザーエージェントは何をしますか？ 彼らは代理をする。
これは、非常に面白い見た目のページにつながる可能性があります。 私は一度、私のコンピュータが開発者が指定したフォントを持っていなかったので、コンピュータが「Wingdings」（アイコンセット）で完全に表示したページに行きました。代わりに使用してください。 このページは私にとっては全く読めませんでした！ これは、フォントスタックが出現する場所です。
フォントスタック内に複数のフォントファミリをカンマで区切る
「フォントスタック」は、ページで使用するフォントのリストです。 あなたの好みの順にあなたのフォントの選択肢を置き、それぞれをカンマで区切ります。 ブラウザがリストに最初のフォントファミリを持っていない場合は、2番目と3番目のフォントファミリがシステム上に見つかるまで試します。
フォントファミリ：Pussycat、Algerian、Broadway;上記の例では、ブラウザーは最初に "Pussycat"フォントを検索し、次に "Algerian"、次に "Broadway"を検索します。 これにより、選択したフォントの少なくとも1つが使用される可能性が高くなります。 これは完璧ではないので、私たちはまだフォントスタックに追加することができます（を参照してください！）。
最後に汎用フォントを使用する
したがって、フォントのリストを持つフォントスタックを作成することはできますが、それでもブラウザが見つけることはできません。 ブラウザの選択肢が貧弱になった場合、あなたのページを読めないようにしたくないことは明らかです。 幸いなことに、CSSにはこれも解決策があります： 汎用フォント 。
フォントリスト（たとえそれが1つのファミリのリストであっても、Webセーフフォントのみであっても）を汎用フォントで終わらせるべきです。 あなたが使うことができる5つがあります：
- 筆記体
- ファンタジー
- モノスペース
- サンセリフ
- セリフ
上記の2つの例は、次のように変更されることがあります。
フォントファミリ：Arial、sans-serif; font-family：Pussycat、Algerian、ブロードウェイ、ファンタジー。一部のフォントファミリ名は2つ以上の単語です
使用するフォントファミリが複数の単語である場合は、二重引用符で囲む必要があります。 一部のブラウザでは、引用符を使わずにフォントファミリを読み取ることができますが、空白が圧縮されたり無視されたりすると問題が発生することがあります。
font-family： "Times New Roman"、セリフ。この例では、複数の単語であるTimes New Romanというフォント名が引用符で囲まれていることがわかります。 これはブラウザに、これらの単語の3つすべてがそのフォント名の一部であり、3つの異なるフォントすべてが1語の名前であることを示します。
Jennifer Kryninのオリジナル記事。 Jeremy Girardによって12/2/16に編集されました