1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
---
title: unicode-range
slug: Web/CSS/@font-face/unicode-range
tags:
- アットルール記述子
- CSS
- CSS Fonts
- CSS Property
- Experimental
- Layout
- リファレンス
- Web
translation_of: Web/CSS/@font-face/unicode-range
---
{{cssref}}
<strong>`unicode-range`</strong> は CSS の記述子で、 {{cssxref("@font-face")}} で定義されたフォントから使用される特定の文字範囲を設定し、現在のページで使用できるようにします。ページがこの範囲内の文字を使用しない場合、フォントはダウンロードされません。少なくとも 1 つの文字を使用すると、フォント全体がダウンロードされます。
## 構文
<pre class="brush:css notranslate">/* <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??; /* 複数の値 */
</pre>
<h3 id="Values" name="Values">値</h3>
- <em><strong>単一の符号位置</strong></em>
- : 単一の Unicode 符号位置。例: `U+26`.
- <em><strong>符号位置の範囲</strong></em>
- : Unicode 符号位置の範囲。例えば、 `U+0025-00FF` は、 <em>`U+0025` から `U+00FF` の範囲内の全文字を含む</em>こと意味します。
- <em><strong>ワイルドカードの範囲</strong></em>
- : ワイルドカード文字を含む Unicode 符号位置の範囲。 `'?'` 文字を使用します。例えば、`U+4??` は <em>`U+400` から `U+4FF` の範囲の全文字を含む</em>ことを意味します。
<h2 id="Description" name="Description">解説</h2>
この記述子の目的は、ブラウザーが特定のページのテキストコンテンツに必要なフォントリソースをダウンロードするだけで済むように、フォントリソースをセグメント化できるようにすることです。たとえば、ローカライズが多いサイトでは、英語、ギリシャ語、日本語のフォントリソースを個別に提供できます。英語版のページを閲覧しているユーザーには、ギリシャ語と日本語のフォントのフォントリソースをダウンロードする必要はなく、帯域幅を節約できます。
<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
{{cssinfo}}
<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
{{csssyntax}}
## 例
<h3 id="Using_a_different_font_for_a_single_character">Using a different font for a single character</h3>
異なるフォントでスタイルを設定したいアンパサンド (アンド記号) を含む 1 つの {{HTMLElement("div")}} 要素を持つだけの HTML を作成します。明確にするために、テキストにはサンセリフフォントの <em>Helvetica</em> を使用し、アンパサンドにはセリフフォントの <em>Times New Roman</em> を使用します。
CSS において、1 つの文字だけを含んだ完全に別個の {{cssxref("@font-face")}} を定義していることが分かります。つまりこの文字だけがこのフォントでスタイルされることになります。これはアンパサンドを {{HTMLElement("span")}} 内に入れて別のフォントを適用することによっても可能ですが、それには余分な要素とルールセットが必要です。
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><div>Me & You = Us</div></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">@font-face {
font-family: 'Ampersand';
src: local('Times New Roman');
unicode-range: U+26;
}
div {
font-size: 4em;
font-family: Ampersand, Helvetica, sans-serif;
}</pre>
<h4 id="Result" name="Result">結果</h4>
{{EmbedLiveSample("Using_a_different_font_for_a_single_character", 500,104)}}
## 仕様書
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Fonts', '#unicode-range-desc', 'unicode-range')}}</td>
<td>{{Spec2('CSS3 Fonts')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
{{Compat("css.at-rules.font-face.unicode-range")}}
## 関連情報
<ul>
- {{cssxref("@font-face/font-display", "font-display")}}
- {{cssxref("@font-face/font-family", "font-family")}}
- {{cssxref("@font-face/font-stretch", "font-stretch")}}
- {{cssxref("@font-face/font-style", "font-style")}}
- {{cssxref("@font-face/font-weight", "font-weight")}}
- {{cssxref("@font-face/font-variant", "font-variant")}}
- {{cssxref("font-feature-settings", "font-feature-settings")}}
- {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
- {{cssxref("@font-face/src", "src")}}
</ul>
|
