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

Copy
1/*
2 * @font-faceルールとunicode-rangeディスクリプタを用いて、
3 * 文字のUnicode範囲に応じて異なるフォントを適用する例。
4 * これにより、ウェブフォントのファイルサイズを最適化し、
5 * 必要な文字セットのみをロードする効率的なフォント管理が可能です。
6 */
7
8/* ラテン文字 (ASCII) 用のカスタムフォントを定義 */
9@font-face {
10  font-family: 'MyCustomFont'; /* 共通のフォントファミリー名 */
11  src: url('fonts/MyCustomFont-Latin.woff2') format('woff2');
12  font-weight: normal;
13  font-style: normal;
14  unicode-range: U+0000-007F; /* 基本ラテン文字のUnicode範囲 */
15}
16
17/* 日本語文字 (ひらがな、カタカナ、一部漢字) 用のカスタムフォントを定義 */
18@font-face {
19  font-family: 'MyCustomFont'; /* 上記と同じフォントファミリー名を使用 */
20  src: url('fonts/MyCustomFont-Japanese.woff2') format('woff2');
21  font-weight: normal;
22  font-style: normal;
23  /* 日本語の主要なUnicode範囲 */
24  unicode-range: U+3040-309F, /* ひらがな */
25                 U+30A0-30FF, /* カタカナ */
26                 U+4E00-9FFF; /* CJK統合漢字 (一般的な範囲) */
27}
28
29/* 定義したフォントファミリーをHTML要素に適用 */
30body {
31  /*
32   * 'MyCustomFont' を指定すると、ブラウザはテキストの内容と
33   * 各@font-faceルールのunicode-rangeに基づいて、最適なフォントリソースをロードします。
34   * フォールバックとして、システムのsans-serifフォントを指定します。
35   */
36  font-family: 'MyCustomFont', sans-serif;
37  font-size: 16px;
38  line-height: 1.5;
39  color: #333;
40}

「unicode-range」は、CSSの「@font-face」ルール内で使用される特別な設定項目（ディスクリプタ）です。このディスクリプタは、定義しているウェブフォントファイルが、どのUnicode文字の範囲に対応しているかをブラウザに伝える役割を持っています。引数や戻り値は特にありません。

この「unicode-range」を使用すると、ウェブフォントのファイルサイズを最適化し、効率的なフォント管理を行うことができます。例えば、日本語と英語が混在するウェブサイトの場合、すべての文字をカバーする一つの巨大なフォントファイルを用意するのではなく、ラテン文字用の軽量なフォントと、日本語文字用のフォントを別々に定義することが可能です。

サンプルコードでは、「MyCustomFont」という共通のフォントファミリー名を使用し、一つ目の「@font-face」ルールで「U+0000-007F」（基本ラテン文字）に対応するフォントを、二つ目のルールで「U+3040-309F」（ひらがな）や「U+4E00-9FFF」（一般的な漢字）といった日本語の主要な文字範囲に対応するフォントを定義しています。

このように設定されたフォントファミリーをHTML要素（例：body）に適用すると、ブラウザは表示するテキストの内容を自動的に分析し、そのテキストに含まれる文字に対応する「unicode-range」が設定されたフォントリソースのみをダウンロードして表示します。これにより、不必要なフォントファイルのロードが防がれ、ウェブサイトの表示速度向上に貢献します。

Copy
1/*
2 * @font-faceルールでカスタムフォントを定義し、
3 * unicode-rangeディスクリプタを使用して、フォントを適用する文字の範囲を指定します。
4 * これにより、ウェブフォントのファイルサイズを最適化し、
5 * 必要な文字にのみ特定のフォントを適用できます。
6 */
7@font-face {
8  /* このカスタムフォントの名前を定義します */
9  font-family: 'JapaneseWebFont';
10  /* フォントファイルの場所と形式を指定します */
11  src: url('fonts/JapaneseWebFont.woff2') format('woff2'),
12       url('fonts/JapaneseWebFont.woff') format('woff');
13  /*
14   * このフォントを適用するUnicode文字の範囲を指定します。
15   * 指定された範囲外の文字には、フォールバックフォント（font-familyで次に指定されたフォント）が使用されます。
16   *
17   * 以下の範囲は一般的な日本語の文字を含みます:
18   * U+3040-309F: ひらがな
19   * U+30A0-30FF: カタカナ
20   * U+4E00-9FFF: CJK統合漢字（一般的な漢字）
21   * 複数の範囲はカンマで区切ります。
22   */
23  unicode-range: U+3040-309F, U+30A0-30FF, U+4E00-9FFF;
24}
25
26/*
27 * 上で定義したカスタムフォントをHTML要素に適用する例です。
28 * `JapaneseWebFont`は、`unicode-range`で指定された日本語文字の範囲にのみ適用されます。
29 * それ以外の文字（例：英数字）には、次に指定されたフォールバックフォント（'メイリオ', 'Meiryo', sans-serif）が使用されます。
30 */
31body {
32  font-family: 'JapaneseWebFont', 'メイリオ', Meiryo, sans-serif;
33  /* 例として、フォントサイズと行の高さを設定します */
34  font-size: 16px;
35  line-height: 1.6;
36}

CSSのunicode-rangeは、@font-faceルール内で使用されるディスクリプタであり、カスタムフォントをウェブサイトに導入する際に、そのフォントが適用されるUnicode文字の範囲を指定するために用いられます。これは引数や戻り値を持たず、直接Unicodeの範囲値を設定することで機能します。

サンプルコードでは、まず@font-faceルールを使って「JapaneseWebFont」というカスタムフォントを定義しています。font-familyでフォント名を、srcでフォントファイルの場所を指定した後、unicode-rangeが登場します。unicode-range: U+3040-309F, U+30A0-30FF, U+4E00-9FFF;のように、このフォントを適用したいUnicodeの範囲を「U+開始コード-終了コード」形式で指定します。複数の範囲はカンマで区切ることが可能です。この例では、ひらがな、カタカナ、そして一般的な漢字の範囲を指定しており、定義された「JapaneseWebFont」はこれらの日本語文字にのみ適用されます。

この機能の最大の利点は、ウェブフォントのファイルサイズを最適化できる点にあります。特定の文字セット（例えば日本語のように文字数が多い言語や、特定の記号など）にのみカスタムフォントを適用し、それ以外の文字（例えば英数字）には、font-familyプロパティで次に指定されたシステムフォントや汎用フォントをフォールバックとして使用させることができます。これにより、ユーザーがダウンロードするフォントファイルの容量を削減し、ウェブサイトの表示速度向上に貢献する効果が期待できます。