【CSS Modules】font-displayアットルール記述子の使い方
font-displayアットルール記述子の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
font-displayプロパティは、CSSの@font-faceルール内で使用され、ウェブページに適用されるカスタムフォント（ウェブフォント）が、実際に読み込まれて表示されるまでの間に、ブラウザがどのようにテキストを表示するかを制御するプロパティです。このプロパティは、ウェブサイトのユーザー体験において、フォントの読み込み速度と表示のバランスを取るために非常に重要な役割を果たします。
ウェブフォントはデザインの自由度を高めますが、そのファイルサイズによっては読み込みに時間がかかり、テキストの表示が遅れることがあります。font-displayプロパティを設定することで、フォントの読み込み中にテキストを一時的に非表示にするか、システムに存在する代替フォントで仮表示するか、といった挙動を開発者が選択できるようになります。
例えば、swap値を使用すると、ウェブフォントが読み込まれるまでの間、代替フォントでテキストが表示され、読み込み完了後すぐにウェブフォントに切り替わります。これにより、ユーザーはコンテンツを待つことなく読み始められ、ウェブサイトの使いやすさが向上します。
システムエンジニアを目指す方にとって、このfont-displayプロパティを理解し適切に活用することは、ウェブサイトのパフォーマンスとユーザーエクスペリエンスを最適化する上で不可欠な知識です。ウェブフォントの表示方法を適切に制御することで、ページの読み込み体感を改善し、視覚的な安定性を高めることができるでしょう。
公式リファレンス: font-display
構文(syntax)
1font-display: swap;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません