【CSS Modules】@font-faceアットルールの使い方

Copy
1/*
2 * @font-faceルールは、ウェブページでカスタムフォントを使用するために
3 * 外部フォントファイルを定義します。
4 */
5@font-face {
6  /*
7   * カスタムフォントの名前を定義します。
8   * この名前は、CSSのfont-familyプロパティで使用されます。
9   */
10  font-family: 'MyWebFont';
11
12  /*
13   * フォントファイルのパスと形式を指定します。
14   * 複数の形式を列挙することで、異なるブラウザでの互換性を高めます。
15   * 通常、より新しい形式 (woff2) を先に記述します。
16   */
17  src: url('fonts/my-web-font.woff2') format('woff2'),
18       url('fonts/my-web-font.woff') format('woff');
19
20  /*
21   * フォントの太さを指定します (任意)。
22   * 同じフォント名で複数の太さのフォントを定義する場合に利用します。
23   */
24  font-weight: normal;
25
26  /*
27   * フォントのスタイルを指定します (任意)。
28   * 同じフォント名で複数のスタイルのフォントを定義する場合に利用します。
29   */
30  font-style: normal;
31
32  /*
33   * フォントの表示方法を制御します (任意)。
34   * フォントのロード中にテキストがどのように表示されるかを指定します。
35   * 例: 'swap' はフォントがロードされるまでシステムフォントで表示します。
36   */
37  font-display: swap;
38}

CSSの@font-faceルールは、ウェブページで外部のカスタムフォントを使用するために、フォントファイルを定義する際に利用します。このルール自体に直接的な引数や戻り値はありませんが、ルール内で複数のプロパティを設定することで、カスタムフォントの挙動を詳細に制御します。

font-familyプロパティでは、カスタムフォントに任意の名前を付けます。この名前は、CSSのfont-familyプロパティで実際にフォントを指定する際に使用されます。srcプロパティでは、フォントファイルの場所とその形式を指定します。複数のフォント形式を記述することで、様々なブラウザでの互換性を高めることができます。通常、より新しい形式であるwoff2などを先に記述することが推奨されます。

font-weightとfont-styleは、それぞれフォントの太さやスタイル（例：イタリック）を定義する任意指定のプロパティです。これらを活用することで、同じフォント名で異なる太さやスタイルのフォントを使い分けることが可能になります。また、font-displayプロパティは、フォントファイルが読み込まれるまでの間、テキストをどのように表示するかを制御します。例えば、swapを指定すると、カスタムフォントがロードされるまでシステムにインストールされている代替フォントでテキストが表示され、読み込み完了後にカスタムフォントに切り替わります。

このように、@font-faceルールを用いることで、ウェブサイトのデザインに合わせた独自のフォントを柔軟に導入し、ユーザー体験を向上させることができます。

Copy
1/*
2 * @font-face ルールを使用して、ウェブページでカスタムフォントを使用できるように定義します。
3 * この定義により、フォントファイルがWebブラウザに読み込まれ、CSSで利用可能になります。
4 */
5@font-face {
6  /*
7   * フォントのファミリー名を定義します。
8   * この名前をCSSの `font-family` プロパティで指定し、フォントを適用します。
9   */
10  font-family: 'MyCustomWebFont';
11
12  /*
13   * フォントファイルへのパスと、そのファイルのフォーマットを指定します。
14   * 複数の `url()` と `format()` を指定することで、ブラウザの互換性を高めます。
15   * ブラウザはリストの中から最初にサポートするフォント形式を読み込みます。
16   * - `url()`: フォントファイルが保存されている場所への相対パスまたは絶対パス。
17   * - `format()`: 指定されたフォントファイルの形式 (例: 'woff2', 'woff', 'truetype', 'opentype', 'svg')。
18   *              これにより、ブラウザは適切なファイルを効率的に選択できます。
19   */
20  src: url('./fonts/MyCustomWebFont-Regular.woff2') format('woff2'),
21       url('./fonts/MyCustomWebFont-Regular.woff') format('woff'),
22       url('./fonts/MyCustomWebFont-Regular.ttf') format('truetype');
23
24  /*
25   * オプション: このフォントファイルが持つフォントの太さを指定します。
26   * ここでは、標準的な太さであることを示しています。
27   */
28  font-weight: normal;
29
30  /*
31   * オプション: このフォントファイルが持つフォントのスタイルを指定します。
32   * ここでは、通常のスタイルであることを示しています。
33   */
34  font-style: normal;
35
36  /*
37   * オプション: フォントの表示方法を制御します。
38   * 'swap' は、Webフォントが読み込まれるまでの間、代替のシステムフォントを表示し、
39   * Webフォントの準備が整い次第、そのフォントに切り替えることを意味します。
40   * これにより、ユーザーはコンテンツを素早く閲覧できます。
41   */
42  font-display: swap;
43}

@font-faceルールは、ウェブページでカスタムフォントを使用できるように定義するためのCSSの機能です。このルールを記述することで、ウェブフォントファイルがブラウザに読み込まれ、ウェブサイトのデザインに利用可能になります。

まず、font-familyプロパティで、このカスタムフォントに任意の名前を付けます。この名前は、後ほどCSSのfont-familyプロパティで指定することで、テキストにフォントを適用するために使われます。

次に、srcプロパティで、フォントファイルが保存されている場所（パス）と、そのファイルの形式をurl()とformat()を使って指定します。複数のフォント形式を記述することで、異なるブラウザでの互換性を高めることができます。ブラウザは指定されたリストの中から、自身がサポートする最初のフォント形式を自動的に選択して読み込みます。

オプションとして、font-weightプロパティでフォントの太さを、font-styleプロパティでフォントのスタイル（斜体など）を定義できます。また、font-displayプロパティでは、ウェブフォントが読み込まれるまでの間、どのようにテキストを表示するかを制御し、ユーザー体験を向上させます。例えばswapを指定すると、一時的にシステムフォントで表示し、ウェブフォントの準備ができ次第切り替わります。

@font-faceルール自体に直接的な引数や戻り値はありませんが、内部の各プロパティがフォントの振る舞いを細かく設定します。