【CSS Modules】font-styleアットルール記述子の使い方
font-styleアットルール記述子の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
font-styleフィールドは、@font-face アットルール内で、ウェブフォントのスタイル情報を定義するために使用されるフィールドです。このフィールドは、ウェブサイトにインポートするフォントファイルがどのようなスタイル、例えば標準、イタリック、斜体などを備えているかをブラウザに正確に伝える重要な役割を果たします。これにより、CSSの font-style プロパティで要素に適用されたスタイルに合致するフォントファイルが、適切に選択されて表示されるようになります。
利用できる主な値としては、normal、italic、oblique があります。normalは、フォントが標準的な書体であることを示します。italicは、デザイナーによって特別に斜体として作成されたイタリック体のフォントであることを指定し、obliqueは、フォントの通常の文字が機械的に傾けられた斜体であることを示します。また、数値を用いて、複数の斜体フォントのバリアントを詳細に指定することも可能です。これらの情報は、ブラウザがフォントファミリー内で利用可能な多様なバリアントの中から、ユーザーの指定するスタイルに最適なものを判断し、読み込むための重要な手がかりとなります。
例えば、斜体バージョンのフォントファイルをウェブサイトで使用したい場合、@font-face ルール内で font-style: italic; と指定することで、そのフォントファイルが斜体であると明示します。このfont-styleフィールドは、font-weightフィールドなどと共に、フォントファミリー内の異なるバリアントを区別し、ウェブフォントの柔軟な利用を可能にするために不可欠です。このフィールドを適切に定義することで、開発者はウェブサイトのタイポグラフィをきめ細かく制御し、より洗練されたユーザーインターフェースを構築できます。
構文(syntax)
1font-style: normal;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません