diff options
| -rw-r--r-- | files/ja/web/css/@font-face/unicode-range/index.md | 89 |
1 files changed, 39 insertions, 50 deletions
diff --git a/files/ja/web/css/@font-face/unicode-range/index.md b/files/ja/web/css/@font-face/unicode-range/index.md index c2c394befd..a5b8e6c325 100644 --- a/files/ja/web/css/@font-face/unicode-range/index.md +++ b/files/ja/web/css/@font-face/unicode-range/index.md @@ -4,64 +4,69 @@ slug: Web/CSS/@font-face/unicode-range tags: - アットルール記述子 - CSS - - CSS Fonts - - CSS Property - - Experimental - - Layout + - CSS フォント + - CSS プロパティ + - 実験的 + - レイアウト - リファレンス - - Web + - ウェブ +browser-compat: css.at-rules.font-face.unicode-range translation_of: Web/CSS/@font-face/unicode-range --- -{{cssref}} +{{CSSRef}} -<strong>`unicode-range`</strong> は CSS の記述子で、 {{cssxref("@font-face")}} で定義されたフォントから使用される特定の文字範囲を設定し、現在のページで使用できるようにします。ページがこの範囲内の文字を使用しない場合、フォントはダウンロードされません。少なくとも 1 つの文字を使用すると、フォント全体がダウンロードされます。 +**`unicode-range`** は CSS の記述子で、 {{cssxref("@font-face")}} で定義されたフォントから使用される特定の文字範囲を設定し、現在のページで使用できるようにします。ページがこの範囲内の文字を使用しない場合、フォントはダウンロードされません。少なくとも 1 つの文字を使用すると、フォント全体がダウンロードされます。 ## 構文 -<pre class="brush:css notranslate">/* <unicode-range> 値 */ +```css +/* <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>ことを意味します。 +- **_単一の符号位置_** + - : 単一の Unicode 符号位置。例: `U+26` +- **_符号位置の範囲_** + - : Unicode 符号位置の範囲。例えば、 `U+0025-00FF` は、 *`U+0025` から `U+00FF` の範囲内の全文字を含む*こと意味します。 +- **_ワイルドカードの範囲_** + - : ワイルドカード文字を含む Unicode 符号位置の範囲。 `'?'` 文字を使用します。例えば、`U+4??` は *`U+400` から `U+4FF` の範囲の全文字を含む*ことを意味します。 -<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 文字だけ異なるフォントを使用 -異なるフォントでスタイルを設定したいアンパサンド (アンド記号) を含む 1 つの {{HTMLElement("div")}} 要素を持つだけの HTML を作成します。明確にするために、テキストにはサンセリフフォントの <em>Helvetica</em> を使用し、アンパサンドにはセリフフォントの <em>Times New Roman</em> を使用します。 +異なるフォントでスタイルを設定したいアンパサンド（アンド記号）を含む 1 つの {{HTMLElement("div")}} 要素を持つだけの HTML を作成します。明確にするために、テキストにはサンセリフフォントの _Helvetica_ を使用し、アンパサンドにはセリフフォントの _Times New Roman_ を使用します。 -CSS において、1 つの文字だけを含んだ完全に別個の {{cssxref("@font-face")}} を定義していることが分かります。つまりこの文字だけがこのフォントでスタイルされることになります。これはアンパサンドを {{HTMLElement("span")}} 内に入れて別のフォントを適用することによっても可能ですが、それには余分な要素とルールセットが必要です。 +CSS において、1 つの文字だけを含んだ完全に別個の {{cssxref("@font-face")}} を定義していることが分かります。つまりこの文字だけがこのフォントでスタイルされることになります。これはアンパサンドを {{HTMLElement("span")}} 内に入れて別のフォントを適用することによっても可能ですが、それには追加の要素とルールセットが必要です。 -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div>Me & You = Us</div></pre> +```html +<div>Me & You = Us</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">@font-face { +```css +@font-face { font-family: 'Ampersand'; src: local('Times New Roman'); unicode-range: U+26; @@ -70,38 +75,23 @@ CSS において、1 つの文字だけを含んだ完全に別個の {{cssxref( 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")}} +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} ## 関連情報 -<ul> - {{cssxref("@font-face/font-display", "font-display")}} - {{cssxref("@font-face/font-family", "font-family")}} - {{cssxref("@font-face/font-stretch", "font-stretch")}} @@ -111,4 +101,3 @@ div { - {{cssxref("font-feature-settings", "font-feature-settings")}} - {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} - {{cssxref("@font-face/src", "src")}} -</ul> |