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

unicode-rangeプロパティは、CSSの@font-faceアットルール内で使用され、定義されるフォントが適用されるユニコード文字の範囲を保持するプロパティです。このプロパティを使用することで、Webページで使用するフォントファイルの中から、特定の文字セット（例えば、日本語文字、記号、特定の言語のアルファベットなど）のみに対応する部分を指定できます。

主な目的は、Webパフォーマンスの最適化です。通常、フォントファイルは多くの文字を含んでおり、ファイルサイズが大きくなりがちです。しかし、unicode-rangeプロパティを使って必要な文字範囲だけを指定することで、ブラウザは該当する文字が含まれるフォントファイルのみをダウンロードするようになります。これにより、ページの読み込み速度を向上させ、ユーザーエクスペリエンスを改善することができます。

値は、U+0-7Fのようなユニコードのコードポイント範囲、U+26のような単一のコードポイント、またはU+4E00-9FFFのような特定の言語ブロックの範囲、さらにはU+??-???のようなワイルドカードを含んだ形式で指定できます。複数の範囲を指定する場合は、カンマで区切ることが可能です。この機能は、特に多言語サイトや、特殊な記号のみを扱う場合に非常に有効です。

Copy
1@font-face {
2  font-family: "CustomFont";
3  src: url("customfont.woff2") format("woff2");
4  unicode-range: U+0-7F, U+30??, U+1F600-1F64F;
5}

引数なし

引数はありません

戻り値なし

戻り値はありません