【CSS Modules】font-familyアットルール記述子の使い方
font-familyアットルール記述子の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
font-familyプロパティは、@font-faceアットルールにおいて、ウェブページで利用するカスタムフォントに一意のファミリー名を定義し、それを保持するプロパティです。このプロパティは、システムエンジニアがウェブサイトに特定のフォントを組み込む際に、そのフォントを識別し、後からCSSで参照するための重要な役割を果たします。具体的には、@font-faceアットルール内でfont-familyディスクリプタとして利用され、フォントファイルと紐付けられたファミリー名を指定します。
例えば、独自にデザインされた「MyCustomFont.woff2」というフォントファイルをウェブサイトで使用したい場合、@font-faceルール内でfont-family: "MyCustomFont";と記述することで、そのフォントに「MyCustomFont」という名前を割り当てることができます。この名前は、その後、HTML要素に対して適用するCSSのfont-familyプロパティの値としてfont-family: "MyCustomFont", sans-serif;のように指定することで、ブラウザが定義されたカスタムフォントを適切に読み込み、表示するために利用されます。これにより、ブラウザに標準で搭載されていない多様なデザインのフォントをウェブサイトで利用できるようになります。
適切なフォントファミリー名を定義することは、ウェブページの視覚的な一貫性を保ち、ブランドイメージを表現するために不可欠です。また、指定するファミリー名は、他のフォント名と重複しないように注意し、大文字・小文字の区別にも配慮することが推奨されます。
構文(syntax)
1セレクタ { 2 font-family: "特定のフォント名", "別のフォント名", ジェネリックファミリー; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません