【CSS Modules】font-displayアットルール記述子の使い方

Copy
1@font-face {
2  font-family: 'MyWebFont'; /* カスタムフォントの名前を定義 */
3  src: url('path/to/mywebfont.woff2') format('woff2'), /* フォントファイルのパスと形式 */
4       url('path/to/mywebfont.woff') format('woff');
5  font-weight: normal; /* フォントの太さを指定 */
6  font-style: normal; /* フォントのスタイルを指定 */
7  /*
8   * font-display: swap; は、ウェブフォントの読み込み戦略を定義します。
9   * これにより、カスタムフォントが読み込まれるまで、システムフォント（代替フォント）でテキストがすぐに表示されます。
10   * カスタムフォントの読み込みが完了すると、自動的にそのフォントに置き換わります（スワップ）。
11   * これは、コンテンツの表示を速くし、ユーザー体験を向上させるために推奨されます。
12   */
13  font-display: swap;
14}
15
16body {
17  /* 定義したカスタムフォントを body 要素に適用します。 */
18  /* カスタムフォントが読み込まれるまでは、代替フォントとして sans-serif が使用されます。 */
19  font-family: 'MyWebFont', sans-serif;
20  font-size: 1.2em; /* テキストのサイズを調整 */
21  margin: 20px; /* 余白を追加 */
22  color: #333; /* 文字色を設定 */
23}

このサンプルコードは、ウェブサイトにカスタムフォントを適用する際に、その表示戦略を制御するCSSのfont-displayプロパティのswap値について説明しています。

まず、@font-faceルールを用いて、MyWebFontというカスタムフォントを定義しています。ここでは、フォントファイルのパスや太さ、スタイルなどを指定します。このルール内で記述されているfont-display: swap;が本題です。

font-displayプロパティは、ウェブフォントが読み込まれるまでの間、ブラウザがテキストをどのように表示するかを決定します。特にswapという値は、カスタムフォントのダウンロードが完了するまで、まずシステムに用意されている代替フォント（例えば、sans-serifなど）でテキストをすぐに表示するようブラウザに指示します。カスタムフォントの読み込みが完了次第、その代替フォントからカスタムフォントへと自動的に切り替わります。このプロパティ自体に引数や戻り値はなく、指定された値によってブラウザの表示挙動が制御されます。

swapを利用することで、ユーザーはウェブフォントの読み込みを待つことなくコンテンツを素早く見ることができ、ウェブサイトの表示速度とユーザー体験の向上に貢献します。

body要素では、定義したMyWebFontを実際に適用しています。font-family: 'MyWebFont', sans-serif;のように代替フォント（sans-serif）も指定することで、カスタムフォントが何らかの理由で利用できない場合でも、テキストが適切に表示されるように配慮しています。

Copy
1/*
2 * @font-face ルール内で font-display プロパティを使用して、
3 * Web フォントが読み込まれるまでの表示方法を制御します。
4 *
5 * この例では 'swap' を使用しており、フォントがまだ読み込まれていない間は
6 * システムフォントでテキストを表示し、読み込みが完了したらWebフォントに置き換えます。
7 */
8@font-face {
9  font-family: 'MyCustomFont'; /* フォントファミリーの名前を定義 */
10  src: url('/fonts/mycustomfont.woff2') format('woff2'), /* フォントファイルのパスと形式 */
11       url('/fonts/mycustomfont.woff') format('woff');
12  font-weight: normal; /* フォントの太さ */
13  font-style: normal; /* フォントのスタイル */
14  font-display: swap; /* フォントの表示方法を定義 (例: swap, auto, block, fallback, optional) */
15}
16
17/*
18 * 定義したカスタムフォントをHTML要素に適用する例。
19 */
20body {
21  font-family: 'MyCustomFont', sans-serif; /* カスタムフォントを適用、読み込み失敗時の代替フォントも指定 */
22}

CSSのfont-displayプロパティは、Webサイトでカスタムフォントを使用する際に、そのフォントファイルがまだ読み込み中の間、ブラウザがテキストをどのように表示するかを制御するものです。これは、ユーザーがコンテンツをスムーズに閲覧できるようにするための重要な設定となります。

サンプルコードでは、まず@font-faceルールを用いてカスタムフォント「MyCustomFont」を定義しています。ここではfont-familyでフォントの名前を指定し、srcで実際のフォントファイルの場所と形式をブラウザに伝えています。そして、この@font-faceルール内でfont-display: swap;と指定されています。

font-display: swap;が設定されている場合、Webフォントの読み込みが完了するまでの間、ブラウザはユーザーのシステムにインストールされているデフォルトのフォント（例：ゴシック体、明朝体など）でテキストを表示します。その後、カスタムフォントの読み込みが完了すると、自動的にそのWebフォントに置き換わります。これにより、フォントの読み込み待ちでテキストが全く表示されない「FOIT (Flash Of Invisible Text)」という現象を防ぎ、ユーザーはすぐに内容を読み始めることができます。font-displayにはauto、block、fallback、optionalといった他の値もあり、それぞれ異なる表示挙動を提供します。

font-displayプロパティ自体は、直接的な引数や戻り値を持つ関数のようなものではなく、指定されたキーワード値によってブラウザのフォント表示ポリシーを定義する記述子です。

最後に、bodyセレクタでfont-family: 'MyCustomFont', sans-serif;と指定することで、定義したカスタムフォントをWebページ全体に適用しています。sans-serifは、カスタムフォントの読み込みに失敗した場合やサポートされていない場合に備えた代替フォントの指定であり、これにより表示の安定性を確保します。