【CSS Modules】font-familyプロパティの使い方
font-familyプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
font-familyプロパティは、HTML要素に表示されるテキストに適用するフォントのリストを保持するプロパティです。このプロパティを使用することで、Webページやアプリケーションにおける文字の見た目を細かく制御し、視覚的なデザインや読みやすさを向上させることができます。
フォントを指定する際は、複数のフォント名をカンマで区切って記述することが一般的です。ブラウザは、このリストの先頭から順に、ユーザーのシステムで利用可能なフォントを探し、最初に見つかったものをテキストに適用します。たとえば、「'Arial', 'Helvetica', sans-serif」と指定した場合、まずArialフォントを探し、なければHelvetica、それもなければゴシック体のような総称フォントであるsans-serifを適用します。
フォント名にスペースが含まれる場合は、ダブルクォーテーションまたはシングルクォーテーションで囲む必要があります。例えば、「"Times New Roman"」のように記述します。
また、リストの最後には、serif（明朝体のような書体）、sans-serif（ゴシック体のような書体）、monospace（等幅フォント）、cursive（筆記体のような書体）、fantasy（装飾的な書体）といった総称フォントを指定することが強く推奨されます。これにより、指定した特定のフォントがユーザーの環境にインストールされていない場合でも、ブラウザが適切な代替フォントを選択し、テキストの表示が大きく崩れることを防ぎます。
このように、font-familyプロパティを適切に設定することで、Webコンテンツの見た目を意図通りに保ちつつ、多様なユーザー環境への対応も可能になります。
構文(syntax)
1font-family: "Helvetica Neue", Arial, sans-serif;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません