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

Copy
1/*
2 * font-familyプロパティは、要素に適用するフォントの優先順位リストを指定します。
3 * 複数のフォント名をカンマ区切りで列挙することで、ユーザーのシステムにインストールされている
4 * フォントの中から、優先度の高い順に利用可能なフォントを探して適用します。
5 * 最終的には、環境に依存しない汎用フォントファミリー（sans-serif, serif, monospaceなど）
6 * を指定することで、どの環境でも最低限の表示を保証することが推奨されます。
7 */
8body {
9  /*
10   * 1. 日本語フォントの指定例 (Windows環境で一般的な「メイリオ」とMac環境で一般的な「ヒラギノ角ゴ ProN W3」)
11   *    これらのフォントが存在しない場合、次に指定されたフォントが試されます。
12   */
13  font-family: "メイリオ", Meiryo, "Hiragino Sans", "ヒラギノ角ゴ ProN W3",
14    /*
15     * 2. 欧文ウェブセーフフォントの指定例 (多くのOSで標準的に利用できるフォント)
16     *    特定の日本語フォントが見つからなかった場合、これらの欧文フォントが試されます。
17     */
18    Arial, Helvetica,
19    /*
20     * 3. 汎用フォントファミリー (最終的なフォールバック)
21     *    上記全てのフォントが見つからなかった場合に、ブラウザが用意している
22     *    sans-serif（ゴシック体）のフォントが適用されます。
23     *    これにより、どのような環境でもテキストが表示されることが保証されます。
24     */
25    sans-serif;
26}

font-familyプロパティは、ウェブページ上でテキストが表示される際のフォントの種類を指定するために使用されます。このプロパティには引数や戻り値はありません。複数のフォント名をカンマで区切って指定すると、リストの左側にあるフォントから順に、閲覧者のシステムにそのフォントがインストールされているかを確認し、最初に利用可能なフォントがテキストに適用されます。

サンプルコードでは、この優先順位の考え方に基づき、複数のフォントが指定されています。まず、"メイリオ"や"ヒラギノ角ゴ ProN W3"といった特定の日本語フォントが指定されており、これらのフォフォントが利用できる環境では、意図した日本語表示が期待できます。もしこれらの日本語フォントが見つからない場合、次にArialやHelveticaといった、多くのオペレーティングシステムで標準的に利用できる欧文フォントが試されます。

そして、リストの最後にはsans-serifのような汎用フォントファミリーが指定されています。これは、上記で指定されたどの具体的なフォントも利用できない場合に、ブラウザが用意している一般的なゴシック体フォントを適用するためのものです。このように汎用フォントファミリーを最後に指定することで、閲覧環境に左右されずに、どのような状況でもテキストが最低限表示されることが保証され、ウェブサイトのアクセシビリティ向上に繋がります。

Copy
1/*
2 * システムエンジニアを目指す初心者向け: font-family プロパティの推奨設定例
3 *
4 * font-familyは、HTML要素に表示するテキストのフォントを指定するCSSプロパティです。
5 * 複数のフォント名をカンマで区切って指定すると、「フォントスタック」が作成されます。
6 * ブラウザはリストの先頭から順に、ユーザーのシステムで利用可能なフォントを適用しようとします。
7 * どのフォントも利用できない場合に備え、最後に`sans-serif`のような一般的なフォントタイプを指定するのが推奨されます。
8 *
9 * このサンプルは、主要なOSのシステムフォントを優先しつつ、
10 * ウェブ上で広く利用され、読みやすいとされる一般的なフォントを組み合わせた推奨スタックです。
11 */
12body {
13  font-family: -apple-system,         /* Apple製品 (macOS, iOS) のシステムフォントを優先 */
14               BlinkMacSystemFont,    /* ChromeやEdge (Blinkエンジン) でのシステムフォント */
15               "Segoe UI",           /* Microsoft Windows のシステムフォント */
16               Roboto,                /* Androidデバイスや一部のウェブサービスで利用されるフォント */
17               "Helvetica Neue",      /* macOSで広く使われる伝統的なフォント */
18               Arial,                 /* 多くのOSに標準搭載されている汎用的なフォント */
19               "Noto Sans",           /* Googleが開発した多言語対応フォント */
20               sans-serif;            /* どのフォントも利用できない場合の、一般的なゴシック体フォントの総称 */
21}

font-familyプロパティは、HTML要素に表示するテキストのフォントを指定するためのCSSプロパティです。このプロパティを設定することで、ウェブページのデザインに合わせてテキストの視覚的なスタイルを調整することができます。

複数のフォント名をカンマで区切って指定すると、「フォントスタック」と呼ばれるリストが作成されます。ブラウザは、このリストの先頭から順に、ユーザーのシステムで利用可能なフォントを探して適用しようとします。これにより、特定のフォントがユーザーの環境にインストールされていない場合でも、代替のフォントで表示されるよう、柔軟に対応することが可能です。どのフォントも利用できない場合に備え、リストの最後にsans-serif（ゴシック体）やserif（明朝体）のような一般的なフォントタイプを指定することが強く推奨されます。

このサンプルコードでは、body要素に対してフォントスタックを設定しています。-apple-systemやBlinkMacSystemFontはApple製品やGoogle Chromeなどのブラウザで使用されるシステムフォントを優先し、"Segoe UI"はWindowsのシステムフォント、RobotoはAndroidデバイスやウェブサービスで広く利用されるフォントです。これらは主要なOSのフォントをカバーしつつ、Arialや"Noto Sans"といった汎用性の高いフォントを組み合わせることで、どの環境でも読みやすい表示を目指しています。

font-familyはCSSのプロパティであるため、関数のように引数を直接受け取ったり、特定の戻り値を返したりするものではありません。指定されたフォント名のリスト自体が、ブラウザがフォントを選択する際の規則として機能します。