概要

unicode-rangeは、CSSで特定の文字コード範囲に対してフォントの適用を制御するためのプロパティです。これを使用することで、Webフォントを特定の文字セットにのみ適用したり、フォントファイルのサイズを最適化したりすることができます。たとえば、英数字用のフォントと、日本語用のフォントを使い分けるといった細かい制御が可能です。

unicode-rangeの使い方

unicode-rangeプロパティは、@font-faceルールと組み合わせて使用し、指定されたユニコード範囲に一致する文字に対してフォントを適用します。このプロパティを使うことで、ページのパフォーマンスを改善し、不要なフォントの読み込みを避けることができます。

基本的な構文

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  unicode-range: <値>;
}

指定できる値

  • 特定の文字コード: U+0041（特定の1文字、例: “A”）
  • 範囲指定: U+0041-005A（特定の範囲、例: 大文字アルファベット）
  • 複数の範囲: U+0030-0039, U+0041-005A（例: 数字と大文字アルファベット）

使用例

英数字に特化したフォントを適用

以下の例では、unicode-rangeを使って、英数字（0-9, A-Z, a-z）に特化したフォントを適用しています。他の文字には、このフォントは適用されず、他の指定されたフォントやデフォルトのシステムフォントが使用されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>unicode-rangeのデモ</title>
<style>
@font-face {
  font-family: 'EnglishNumbers';
  src: url('english-numbers.woff2') format('woff2');
  unicode-range: U+0030-0039, U+0041-005A, U+0061-007A; /* 数字と英字 */
}
body {
  font-family: 'EnglishNumbers', sans-serif;
}
</style>
</head>
<body>
<h2>unicode-range: 数字と英字にフォントを適用</h2>
<p>123 ABC abc 日本語テキスト</p>
</body>
</html>

この例では、数字と英字（大文字・小文字）のみがEnglishNumbersフォントで表示され、日本語など他の文字は別のフォントで表示されます。

日本語文字にフォントを適用

次の例では、日本語の文字コード範囲（U+3000-U+30FF）を指定して、漢字やひらがな、カタカナのみに特定のフォントを適用しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>unicode-rangeのデモ - 日本語</title>
<style>
@font-face {
  font-family: 'JapaneseFont';
  src: url('japanese-font.woff2') format('woff2');
  unicode-range: U+3000-30FF; /* ひらがな、カタカナ、句読点 */
}
body {
  font-family: 'JapaneseFont', sans-serif;
}
</style>
</head>
<body>
<h2>unicode-range: 日本語文字にフォントを適用</h2>
<p>これはテストです。ABC 123</p>
</body>
</html>

このコードでは、日本語の文字（ひらがな、カタカナ、句読点など）は指定されたフォントで表示され、他の文字はシステムフォントが使用されます。

フォントファイルの最適化

unicode-rangeを活用することで、フォントファイルのサイズを最適化できます。必要な文字範囲のみを含むフォントを使用するため、ページの読み込み速度が向上し、ユーザーにとって快適な体験を提供できます。

フォントサブセットの作成

  • フォントサブセットを作成し、各フォントファイルに特定のunicode-rangeを割り当てることで、不要な文字を含む大きなフォントファイルの読み込みを回避できます。
  • 例えば、日本語、英語、数字のみのフォントを個別に作成し、使用する文字に応じて適切なフォントを読み込むように設定します。

使用する際の注意点

  1. フォールバックフォントの準備
    unicode-rangeで指定した範囲に文字が含まれていない場合、その文字には適用されず、フォールバックフォントが使用されます。このため、他のフォント設定が適切に機能するようにすることが重要です。
  2. フォントのライセンスに注意
    サブセットフォントを作成する際は、フォントのライセンスに注意してください。一部のフォントは、サブセット化や改変を禁止している場合があります。
  3. ブラウザの互換性を確認
    unicode-rangeは、モダンブラウザで広くサポートされていますが、一部の古いブラウザでは期待通りに動作しない可能性があります。必ず互換性の確認を行い、代替フォントやフォールバック設定を準備しましょう。
  4. パフォーマンスへの影響を考慮
    unicode-rangeを使用しても、フォントファイルが多くなるとリクエストが増え、パフォーマンスに影響を与える可能性があります。適切な範囲の設定とファイルサイズの最適化が必要です。

まとめ

unicode-rangeは、フォントの適用範囲を細かく制御できる強力なCSSプロパティです。特定の文字セットに対してフォントを適用することで、フォントファイルの最適化やページのパフォーマンス向上が図れます。使用する際は、フォントのサブセット化やフォールバックの準備を行い、適切な設定で効果的に利用しましょう。

参照:

unicode-range（`CSS`） - MDN Web Docs