CSS の unicode-range 記述子は、 @font-face で定義されたフォントから使用される特定の文字範囲を設定し、現在のページで使用できるようにします。ページがこの範囲内の文字を使用しない場合、フォントはダウンロードされません。少なくとも 1 つの文字を使用すると、フォント全体がダウンロードされます。

この記述子の目的は、ブラウザーが特定のページのテキストコンテンツに必要なフォントリソースをダウンロードするだけで済むように、フォントリソースをセグメント化できるようにすることです。たとえば、ローカライズが多いサイトでは、英語、ギリシャ語、日本語のフォントリソースを個別に提供できます。英語版のページを閲覧しているユーザーには、ギリシャ語と日本語のフォントのフォントリソースをダウンロードする必要はなく、帯域幅を節約できます。

関連する @規則@font-face
初期値U+0-10FFFF
メディアすべて
計算値指定値
正規順序形式文法における値の出現順

構文

/* <unicode-range> 値 */
unicode-range: U+26;               /* 単一の符号位置 */
unicode-range: U+0-7F;
unicode-range: U+0025-00FF;        /* 符号位置の範囲 */
unicode-range: U+4??;              /* ワイルドカードの範囲 */
unicode-range: U+0025-00FF, U+4??; /* 複数の値 */

単一の符号位置
単一の Unicode 符号位置。例: U+26.
符号位置の範囲
Unicode 符号位置の範囲。例えば、 U+0025-00FF は、 U+0025 から U+00FF の範囲内の全文字を含むこと意味します。
ワイルドカードの範囲
ワイルドカード文字を含む Unicode 符号位置の範囲。 '?' 文字を使用します。例えば、U+4??U+400 から U+4FF の範囲の全文字を含むことを意味します。

形式文法

<unicode-range>#

異なるフォントでスタイルを設定したいアンパサンド (アンド記号) を含む 1 つの <div> 要素を持つだけの HTML を作成します。明確にするために、テキストにはサンセリフフォントの Helvetica を使用し、アンパサンドにはセリフフォントの Times New Roman を使用します。

<div>Me & You = Us</div>

CSS において、1 つの文字だけを含んだ完全に別個の @font-face を定義していることが分かります。つまりこの文字だけがこのフォントでスタイルされることになります。これはアンパサンドを <span> 内に入れて別のフォントを適用することによっても可能ですが、それには余分な要素とルールセットが必要です。

@font-face {
  font-family: 'Ampersand';
  src: local('Times New Roman');
  unicode-range: U+26;
}

div {
  font-size: 4em;
  font-family: Ampersand, Helvetica, sans-serif;	
}

Reference result

What the example should looks like if your browser supports it.

ライブ例

仕様書

仕様書 状態 備考
CSS Fonts Module Level 3
unicode-range の定義
勧告候補 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
unicode-rangeChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 36IE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 36Opera Android ? Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09, dskmori, miminari
最終更新者: mdnwebdocs-bot,