aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web/css/@font-face
diff options
context:
space:
mode:
Diffstat (limited to 'files/ja/web/css/@font-face')
-rw-r--r--files/ja/web/css/@font-face/font-display/index.html116
-rw-r--r--files/ja/web/css/@font-face/font-family/index.html89
-rw-r--r--files/ja/web/css/@font-face/font-stretch/index.html187
-rw-r--r--files/ja/web/css/@font-face/font-style/index.html123
-rw-r--r--files/ja/web/css/@font-face/font-variation-settings/index.html89
-rw-r--r--files/ja/web/css/@font-face/font-weight/index.html179
-rw-r--r--files/ja/web/css/@font-face/index.html197
-rw-r--r--files/ja/web/css/@font-face/src/index.html110
-rw-r--r--files/ja/web/css/@font-face/unicode-range/index.html118
9 files changed, 1208 insertions, 0 deletions
diff --git a/files/ja/web/css/@font-face/font-display/index.html b/files/ja/web/css/@font-face/font-display/index.html
new file mode 100644
index 0000000000..b10d04d028
--- /dev/null
+++ b/files/ja/web/css/@font-face/font-display/index.html
@@ -0,0 +1,116 @@
+---
+title: font-display
+slug: Web/CSS/@font-face/font-display
+tags:
+ - '@font-face'
+ - CSS
+ - CSS フォント
+ - CSS 記述子
+ - font-display
+ - ウェブフォント
+ - フォント
+ - リファレンス
+translation_of: Web/CSS/@font-face/font-display
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>font-display</code></strong> 記述子は、フォントがダウンロード済みで利用できるかに基づいて、どのようにフォントの種類を表示するかを定めます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css notranslate">/* キーワード値 */
+font-display: auto;
+font-display: block;
+font-display: swap;
+font-display: fallback;
+font-display: optional;</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>フォントの表示戦略はユーザーエージェントが定義します。</dd>
+ <dt><code>block</code></dt>
+ <dd>フォントに対して短いブロック期の後、永続的にスワップ期を置きます。</dd>
+ <dt><code>swap</code></dt>
+ <dd>フォントに対して非常に短いブロック期の後、永続的にスワップ期を置きます。</dd>
+ <dt><code>fallback</code></dt>
+ <dd>フォントに対して非常に短いブロック期の後、短いスワップ期を置きます。</dd>
+ <dt><code>optional</code></dt>
+ <dd>フォントに対して非常に短いブロック期の後、スワップ期を置きません。</dd>
+</dl>
+
+<h2 id="Description" name="Description">説明</h2>
+
+<h3 id="The_font_display_timeline" name="The_font_display_timeline">フォント表示の過程</h3>
+
+<p>フォント表示の過程は、ユーザーエージェントが指定されたダウンロードフォントを利用しようとした瞬間に始まります。過程はフォントを利用して任意の要素を表示する振る舞いを説明する、以下の 3 つの時期に分かれます。</p>
+
+<dl>
+ <dt>フォントブロック期</dt>
+ <dd>フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は <em>不可視の</em> 代替フォントで描画する必要があります。この時期に読み込みに成功したフォントは、通常通りに利用できます。</dd>
+ <dt>フォントスワップ期</dt>
+ <dd>フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は代替フォントで描画する必要があります。この時期に読み込みに成功したフォントは、通常通りに利用できます。</dd>
+ <dt>フォント失敗期</dt>
+ <dd>フォントが読み込まれていない場合、ユーザーエージェントは読み込みに失敗したとして扱い、通常のフォントで代替を行います。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Specifying_fallback_font-display" name="Specifying_fallback_font-display">font-display のフォールバックを指定する</h3>
+
+<pre class="brush: css; highlight[7] notranslate">@font-face {
+ font-family: ExampleFont;
+ src: url(/path/to/fonts/examplefont.woff) format('woff'),
+ url(/path/to/fonts/examplefont.eot) format('eot');
+ font-weight: 400;
+ font-style: normal;
+ font-display: fallback;
+}</pre>
+
+<h2 id="Specification" name="Specification">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">仕様書</th>
+ <th scope="col">策定状況</th>
+ <th scope="col">コメント</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('CSS4 Fonts', '#font-display-desc', 'font-display')}}</td>
+ <td>{{Spec2('CSS4 Fonts')}}</td>
+ <td>初回定義</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.at-rules.font-face.font-display")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("@font-face/font-family", "font-family")}}</li>
+ <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
+ <li>{{cssxref("@font-face/font-style", "font-style")}}</li>
+ <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
+ <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
+ <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
+ <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
+ <li>{{cssxref("@font-face/src", "src")}}</li>
+ <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li>
+</ul>
diff --git a/files/ja/web/css/@font-face/font-family/index.html b/files/ja/web/css/@font-face/font-family/index.html
new file mode 100644
index 0000000000..39aa78e3a9
--- /dev/null
+++ b/files/ja/web/css/@font-face/font-family/index.html
@@ -0,0 +1,89 @@
+---
+title: font-family
+slug: Web/CSS/@font-face/font-family
+tags:
+ - '@font-face'
+ - At-rule descriptor
+ - CSS
+ - CSS Descriptor
+ - CSS Fonts
+ - Reference
+translation_of: Web/CSS/@font-face/font-family
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>font-family</code></strong> は CSS の記述子で、 {{cssxref("@font-face")}} 規則で指定されたフォントのフォントファミリーを指定することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css notranslate">/* &lt;string&gt; 値 */
+font-family: "font family";
+font-family: 'another font family';
+
+/* &lt;custom-ident&gt; 値 */
+font-family: examplefont;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;family-name&gt;</code></dt>
+ <dd>フォントファミリーの名前を指定します。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_the_font_family_name" name="Setting_the_font_family_name">フォントファミリー名の設定</h3>
+
+<pre class="brush: css notranslate">@font-face {
+ font-family: examplefont;
+ src: url('examplefont.ttf');
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<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', '#font-family-desc', 'font-family')}}</td>
+ <td>{{Spec2('CSS3 Fonts')}}</td>
+ <td>初回定義</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.at-rules.font-face.font-family")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("@font-face/font-display", "font-display")}}</li>
+ <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
+ <li>{{cssxref("@font-face/font-style", "font-style")}}</li>
+ <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
+ <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
+ <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
+ <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
+ <li>{{cssxref("@font-face/src", "src")}}</li>
+ <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li>
+</ul>
diff --git a/files/ja/web/css/@font-face/font-stretch/index.html b/files/ja/web/css/@font-face/font-stretch/index.html
new file mode 100644
index 0000000000..1704f1d662
--- /dev/null
+++ b/files/ja/web/css/@font-face/font-stretch/index.html
@@ -0,0 +1,187 @@
+---
+title: font-stretch
+slug: Web/CSS/@font-face/font-stretch
+tags:
+ - '@font-face'
+ - CSS
+ - Reference
+ - descripter
+ - font-stretch
+ - 記述子
+translation_of: Web/CSS/@font-face/font-stretch
+---
+<div>{{CSSRef}}{{draft}}</div>
+
+<p><strong><code>font-stretch</code></strong> は CSS の記述子で、ウェブページ作成者が {{cssxref("@font-face")}} 規則で定義されているフォントが通常か、幅狭か、幅広かを指定できるようにします。</p>
+
+<p>ある特定のフォントについて、作成者は同じフォントの異なるスタイルに対応するさまざまなフォントフェイスをダウンロードでき、<code>font-stretch</code> 記述子を用いることでフォントフェイスのストレッチを明示的に指定します。CSS 記述子の値は、対応するフォントプロパティの値と同じです。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* 単一の値 */
+font-stretch: ultra-condensed;
+font-stretch: extra-condensed;
+font-stretch: condensed;
+font-stretch: semi-condensed;
+font-stretch: normal;
+font-stretch: semi-expanded;
+font-stretch: expanded;
+font-stretch: extra-expanded;
+font-stretch: ultra-expanded;
+font-stretch: 50%;
+font-stretch: 100%;
+font-stretch: 200%;
+
+/* 複数値 */
+font-stretch: 75% 125%;
+font-stretch: condensed ultra-condensed;;
+</pre>
+
+<p><code>font-weight</code> プロパティは以下にリストとして示されている値のいずれかを使用して記述されます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>普通の文字幅。</dd>
+ <dt><code>semi-condensed</code>, <code>condensed</code>, <code>extra-condensed</code>, <code>ultra-condensed</code></dt>
+ <dd>通常より幅狭な字を示します。semi-condenced が regular に比べてわずかに幅が細い程度で、そこから右 (ultra-condenced) に向かうにつれてさらに細くなっていきます。</dd>
+ <dt><code>semi-expanded</code>, <code>expanded</code>, <code>extra-expanded</code>, <code>ultra-expanded</code></dt>
+ <dd>通常より幅広な字を示します。semi-rxpanded がわずかに広い程度で、そこから右 (ultra-expanded) に向かうにつれてさらに広くなっていきます。</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>50% から 200% の {{cssxref("&lt;percentage&gt;")}} 値で示します。このプロパティに負の値は許可されていません。</dd>
+</dl>
+
+<p><code>font-stretch</code> の旧バージョンではプロパティは上記の <code>&lt;percentage&gt;</code> 以外の 9 つのキーワードのみを許可していましたが、CSS Fonts Level 4 における構文の拡張により<code>&lt;percentage&gt;</code> も使用できるようになりました。これにより、バリアブルフォントは連続した文字幅のようなものを提供できます。TrueType または OpenType バリアブルフォント (後述) の場合、"wdth" バリエーションを使用してさまざまな幅を実装できます。</p>
+
+<p>フォントが指定された値と完全に一致するフェイスが提供されない場合、100% 未満の値は幅狭に現像され、100% 以上の値は幅広に現像されます。</p>
+
+<h3 id="Keyword_to_numeric_mapping" name="Keyword_to_numeric_mapping">キーワードとパーセント値の対照表</h3>
+
+<p>以下の表はキーワード指定の際の字幅と <code>&lt;percentage&gt;</code> 指定時の幅の違いを示します:</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+ <tr>
+ <th scope="col">キーワード</th>
+ <th scope="col">パーセント値</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>ultra-condensed</code></td>
+ <td>50%</td>
+ </tr>
+ <tr>
+ <td><code>extra-condensed</code></td>
+ <td>62.5%</td>
+ </tr>
+ <tr>
+ <td><code>condensed</code></td>
+ <td>75%</td>
+ </tr>
+ <tr>
+ <td><code>semi-condensed</code></td>
+ <td>87.5%</td>
+ </tr>
+ <tr>
+ <td><code>normal</code></td>
+ <td>100%</td>
+ </tr>
+ <tr>
+ <td><code>semi-expanded</code></td>
+ <td>112.5%</td>
+ </tr>
+ <tr>
+ <td><code>expanded</code></td>
+ <td>125%</td>
+ </tr>
+ <tr>
+ <td><code>extra-expanded</code></td>
+ <td>150%</td>
+ </tr>
+ <tr>
+ <td><code>ultra-expanded</code></td>
+ <td>200%</td>
+ </tr>
+ </tbody>
+</table>
+
+<h3 id="Variable_fonts" name="Variable_fonts">バリアブル (可変) フォント</h3>
+
+<p>ほとんどのフォントはキーワードの 1 つに対応する特定の幅を持ちます。しかしながら、バリアブル (可変) フォントと呼ばれる一部のフォントはきめ細かい精度で一連の伸縮が可能になっています。これにより、デザイナーは選択したウェイトをより厳密に制御できます。 これにはパーセント範囲が役立ちます。</p>
+
+<p>TrueType または OpenType 可変フォントの場合、"wdth" バリエーションを使用して、さまざまなグリフ幅を実装します。</p>
+
+<p>以下の例が動作するには、CSS Fonts Level 4 構文をサポートするブラウザーが必要です。この構文では font-weight は 1 から 1000 の任意の数値にできます。</p>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre>{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>以下はローカルの Open Sans 書体をインポートし、normal、semi-condensed、ならびに semi-expanded を使用できるようにするものです。</p>
+
+<pre class="brush: css">@font-face {
+ font-family: "Open Sans";
+ src: local("Open Sans") format("woff2"),
+ url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+ font-stretch: 87.5% 112.5%;
+}</pre>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p>特にフォントの<a href="/ja/docs/Web/CSS/color#Accessibility_concerns">コントラストカラー比が低い</a>場合、識字障害をはじめとする認知症状のある人は凝縮しすぎたフォントを読むのが困難になる場合があります。詳細は以下をご覧ください。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN 「知覚可能」、ガイドライン 1.4 の説明</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0</a> (英語)</li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">仕様書</th>
+ <th scope="col">状態</th>
+ <th scope="col">備考</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-stretch')}}</td>
+ <td>{{Spec2('CSS4 Fonts')}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-stretch')}}</td>
+ <td>{{Spec2('CSS3 Fonts')}}</td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.at-rules.font-face.font-stretch")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("@font-face/font-display", "font-display")}}</li>
+ <li>{{cssxref("@font-face/font-family", "font-family")}}</li>
+ <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
+ <li>{{cssxref("@font-face/font-style", "font-style")}}</li>
+ <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
+ <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
+ <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
+ <li>{{cssxref("@font-face/src", "src")}}</li>
+ <li>{{cssxref("@font-face/unicode-range", "unicode-range descriptor")}}</li>
+</ul>
diff --git a/files/ja/web/css/@font-face/font-style/index.html b/files/ja/web/css/@font-face/font-style/index.html
new file mode 100644
index 0000000000..051fe294c0
--- /dev/null
+++ b/files/ja/web/css/@font-face/font-style/index.html
@@ -0,0 +1,123 @@
+---
+title: font-style
+slug: Web/CSS/@font-face/font-style
+tags:
+ - '@font-face'
+ - At-rule descriptor
+ - CSS
+ - CSS Descriptor
+ - CSS Fonts
+ - Reference
+translation_of: Web/CSS/@font-face/font-style
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>font-style</code></strong> は CSS の記述子で、 {{cssxref("@font-face")}} 規則の中で指定されたフォントのフォントスタイルを指定することができます。</p>
+
+<p>特定のフォントファミリについて、同じフォントファミリの異なるスタイルに対応する様々なフォントフェイスをダウンロードできるようにすることができ、 <code>font-style</code> 記述子を使用してフォントフェイスのスタイルを正確に指定することができます。 CSS 記述子の値は対応する font プロパティと同じです。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css notranslate">font-style: normal;
+font-style: italic;
+font-style: oblique;
+font-style: oblique 30deg;
+font-style: oblique 30deg 50deg;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>フォントファミリの通常の版を選択します。</dd>
+ <dt><code>italic</code></dt>
+ <dd>フォントフェイスが通常のフォントのイタリック版であることを指定します。</dd>
+ <dt><code>oblique</code></dt>
+ <dd>フォントフェイスが通常のフォントを機械的に傾けたものであることを指定します。</dd>
+</dl>
+
+<dl>
+ <dt><code>oblique</code> と角度</dt>
+ <dd><code>oblique</code> として分類されたフォントを選択し、テキストの角度を追加で指定します。</dd>
+ <dt><code>oblique</code> と角度の範囲</dt>
+ <dd><code>oblique</code> として分類されたフォントを選択し、テキストの角度の範囲を追加で指定します。なお、範囲は <code>font-style</code> が <code>oblique</code> であるときにだけ対応しています。 <code>font-style: normal</code> 又は <code>italic</code> の場合は、第二の値は許可されません。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Specifying_an_italic_font_style" name="Specifying_an_italic_font_style">イタリックフォントスタイルの指定</h3>
+
+<p>例として、 garamond フォントファミリを指定すると、基本の形として、以下の結果が得られます。</p>
+
+<pre class="brush: css notranslate">@font-face {
+ font-family: garamond;
+ src: url('garamond.ttf');
+}</pre>
+
+<p><img alt="スタイルなしの garamond" src="https://mdn.mozillademos.org/files/12265/garamondunstyled.JPG" style="height: 101px; width: 276px;"></p>
+
+<p>このテキストのイタリック版は、スタイルなしの版と同じ字形を使用しますが、人工的に数度だけ傾けてあります。</p>
+
+<p><img alt="人工的に傾けた garamond" src="https://mdn.mozillademos.org/files/12267/garamondartificialstyle.JPG" style="height: 101px; width: 276px;"></p>
+
+<p>一方で、フォントファミリに真にイタリックである版がある場合、 <code>src</code> 記述子を含めてそのフォントがイタリックだと指定することで、フォントがイタリックになることが明確になります。本当のイタリックは異なる字形を用い、少し右上に傾いており、いくらか固有の特徴を持ち、一般に丸みを帯びており、筆記体に似た品質です。これらのフォントはフォントのデザイナーによって特別に作成されたものであり、人工的に傾けたものでは<strong>ありません</strong>。</p>
+
+<pre class="brush: css notranslate">@font-face {
+ font-family: garamond;
+ src: url('garamond-italic.ttf');
+ font-style: italic;
+}</pre>
+
+<p><img alt="イタリックの garamond" src="https://mdn.mozillademos.org/files/12269/garamonditalic.JPG" style="height: 101px; width: 267px;"></p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">仕様書</th>
+ <th scope="col">状態</th>
+ <th scope="col">備考</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-style')}}</td>
+ <td>{{Spec2('CSS4 Fonts')}}</td>
+ <td>角度の値を付けた oblique キーワードを追加</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-style')}}</td>
+ <td>{{Spec2('CSS3 Fonts')}}</td>
+ <td>初回定義</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.at-rules.font-face.font-style")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("@font-face/font-display", "font-display")}}</li>
+ <li>{{cssxref("@font-face/font-family", "font-family")}}</li>
+ <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
+ <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
+ <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
+ <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
+ <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
+ <li>{{cssxref("@font-face/src", "src")}}</li>
+ <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li>
+</ul>
diff --git a/files/ja/web/css/@font-face/font-variation-settings/index.html b/files/ja/web/css/@font-face/font-variation-settings/index.html
new file mode 100644
index 0000000000..5c26e1956a
--- /dev/null
+++ b/files/ja/web/css/@font-face/font-variation-settings/index.html
@@ -0,0 +1,89 @@
+---
+title: font-variation-settings
+slug: Web/CSS/@font-face/font-variation-settings
+tags:
+ - '@font-face'
+ - CSS
+ - CSS Descriptor
+ - CSS Fonts
+ - CSS 記述子
+ - Reference
+translation_of: Web/CSS/@font-face/font-variation-settings
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>font-variation-settings</code></strong> は CSS の記述子で、 {{cssxref("@font-face")}} 規則の中で OpenType または TrueType の低レベルのフォントバリエーションを指定することができます。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<div class="syntaxbox">
+<pre class="brush: css">/* 既定の設定を使用 */
+font-variation-settings: normal;
+
+/* OpenType 軸名の値を設定 */
+font-variation-settings: "xhgt" 0.7;</pre>
+</div>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>テキストは既定の設定を使用してレイアウトされます。</dd>
+ <dt><code>&lt;string&gt; &lt;number&gt;</code></dt>
+ <dd>テキストを描画するとき、 OpenType 軸名のリストがテキストレイアウトエンジンに渡され、フォント機能を有効化または無効化します。それぞれの設定は常に {{cssxref("&lt;string&gt;")}} が4つの ASCII 文字で、その後に字句の値を示す {{cssxref("number")}} が続きます。 <code>&lt;string&gt;</code> の長さが異なっていたり U+20 - U+7E 以外のコードポイントの範囲の文字が含まれていたりした場合は、プロパティ全体が無効になります。 <code>&lt;number&gt;</code> は小数や負の数を取ることができます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: css">@font-face {
+ font-family: 'OpenTypeFont';
+ src: url('open_type_font.woff2') format('woff2');
+ font-weight: normal;
+ font-style: normal;
+ font-variation-settings: 'wght' 400, 'wdth' 300;
+}</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">仕様書</th>
+ <th scope="col">状態</th>
+ <th scope="col">備考</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('CSS4 Fonts', '#font-rend-desc', 'font-variation-settings')}}</td>
+ <td>{{Spec2('CSS4 Fonts')}}</td>
+ <td>初回定義</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.at-rules.font-face.font-variation-settings")}}</p>
+
+<h2 id="See_Also" name="See_Also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("@font-face/font-display", "font-display")}}</li>
+ <li>{{cssxref("@font-face/font-family", "font-family")}}</li>
+ <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
+ <li>{{cssxref("@font-face/font-style", "font-style")}}</li>
+ <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
+ <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
+ <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
+ <li>{{cssxref("@font-face/src", "src")}}</li>
+ <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li>
+</ul>
diff --git a/files/ja/web/css/@font-face/font-weight/index.html b/files/ja/web/css/@font-face/font-weight/index.html
new file mode 100644
index 0000000000..77106d3ea9
--- /dev/null
+++ b/files/ja/web/css/@font-face/font-weight/index.html
@@ -0,0 +1,179 @@
+---
+title: font-weight
+slug: Web/CSS/@font-face/font-weight
+tags:
+ - '@font-face'
+ - At-rule descriptor
+ - CSS
+ - Reference
+ - descriptor
+ - font-weight
+translation_of: Web/CSS/@font-face/font-weight
+---
+<p>{{CSSRef}}</p>
+
+<p><strong><code>font-weight</code></strong> は CSS の記述子で、 {{cssxref("@font-face")}} 規則で指定されたフォントの太さを指定することができます。別に {{cssxref("font-weight")}} プロパティを使用して、テキストを表示する文字の太さや細さを設定することができます。</p>
+
+<p>特定のフォントファミリについて、同じフォントファミリの異なるスタイルに対応する様々なフォントフェイスをダウンロードできるようにすることができ、 <code>font-weight</code> 記述子を使用してフォントフェイスの太さを正確に指定することができます。 CSS 記述子の値は対応する font プロパティと同じです。</p>
+
+<p>一般に、特定のフォントファミリには限られた太さのみが利用できます。指定された太さが存在しない場合、近い太さが使用されます。太字がないフォントでは、ふつうはユーザーエージェントが合成します。これを抑止するには、 {{cssxref('font-synthesis')}} プロパティを使用してください。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="notranslate">/* 単一の値 */
+font-weight: normal;
+font-weight: bold;
+font-weight: 400;
+
+/* 複数の値 */
+font-weight: normal bold;
+font-weight: 300 500;
+</pre>
+
+<p><code>font-weight</code> プロパティは、以下に挙げる値のうちの一つを使用して記述します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>通常のフォントの太さです。 <code>400</code> と同じです。</dd>
+ <dt><code>bold</code></dt>
+ <dd>太字のフォントの太さです。 <code>700</code> と同じです。</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>1 以上 1000 以下の {{cssxref("&lt;number&gt;")}} 値です。数値が大きいと、数値が小さい物より太さが太い (又は同じ) ことを表します。よく使用される値は、以下の<a href="#Common_weight_name_mapping">一般的な太さ名との対応</a>にあるように、共通の太さ名に対応しています。</dd>
+</dl>
+
+<p><code>font-weight</code> 仕様書の古いバージョンでは、このプロパティはキーワード値と数値 100, 200, 300, 400, 500, 600, 700, 800, 900 のみを受け付けていました。可変フォント以外では実際にはこれらのセット値しか利用できません。ただし、可変フォント以外では細かい値 (例えば 451) は、これらの値のいずれかに変換されます。</p>
+
+<p>CSS Fonts レベル 4 では、構文を拡張して 1 から 1000 までの任意の数値を受け付けるようになり、{{anch("Variable fonts", "可変フォント")}}が導入され、フォントの太さにもっと細かい範囲を使用することができるようになりました。</p>
+
+<h3 id="Common_weight_name_mapping" name="Common_weight_name_mapping">良くある太さ名の対応</h3>
+
+<p><code>100</code> から <code>900</code> の数値は、おおよそ以下の太さ名に対応します。</p>
+
+<table>
+ <thead>
+ <tr>
+ <th scope="col">値</th>
+ <th scope="col">太さ名</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>100</td>
+ <td>Thin (Hairline)</td>
+ </tr>
+ <tr>
+ <td>200</td>
+ <td>Extra Light (Ultra Light)</td>
+ </tr>
+ <tr>
+ <td>300</td>
+ <td>Light</td>
+ </tr>
+ <tr>
+ <td>400</td>
+ <td>Normal</td>
+ </tr>
+ <tr>
+ <td>500</td>
+ <td>Medium</td>
+ </tr>
+ <tr>
+ <td>600</td>
+ <td>Semi Bold (Demi Bold)</td>
+ </tr>
+ <tr>
+ <td>700</td>
+ <td>Bold</td>
+ </tr>
+ <tr>
+ <td>800</td>
+ <td>Extra Bold (Ultra Bold)</td>
+ </tr>
+ <tr>
+ <td>900</td>
+ <td>Black (Heavy)</td>
+ </tr>
+ </tbody>
+</table>
+
+<h3 id="Variable_fonts" name="Variable_fonts">可変フォント</h3>
+
+<p>多くのフォントは、<a href="#Common_weight_name_mapping">一般的な太さ名との対応</a>の中の数値の一つに対応する特定の太さを持っています。しかし、可変フォントと呼ばれる一部のフォントは、もっと高い又は低い粒度の太さの範囲に対応しており、これにより、デザイナーは選択した太さをより詳細に制御することができます。</p>
+
+<p>TrueType や OpenType の可変フォントでは、 "wght" バリエーションが様々な幅を実装するために使用されます。</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<p>弱視の人は、 <code>font-weight</code> の値が <code>100</code> (Thin/Hairline) または <code>200</code> (Extra Light) の場合、特にフォントの<a href="/en-US/docs/Web/CSS/color#Accessibility_concerns">コントラスト比が低い場合</a>は、テキストを読むのが難しくなることがあります。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_normal_font_weight_in_a_font-face_rule" name="Setting_normal_font_weight_in_a_font-face_rule">@font-face 規則における通常のフォントの太さの設定</h3>
+
+<p>以下の例は、ローカルの Open Sans フォントを見つけるか、またはそれをインポートして、通常の太さのフォントを使用することができます。</p>
+
+<pre class="notranslate">@font-face {
+ font-family: "Open Sans";
+ src: local("Open Sans") format("woff2"),
+ url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+ font-weight: 400;
+}</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">仕様書</th>
+ <th scope="col">状態</th>
+ <th scope="col">備考</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-weight')}}</td>
+ <td>{{Spec2('CSS4 Fonts')}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-weight')}}</td>
+ <td>{{Spec2('CSS3 Fonts')}}</td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.at-rules.font-face.font-weight")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("@font-face/font-display", "font-display")}}</li>
+ <li>{{cssxref("@font-face/font-family", "font-family")}}</li>
+ <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
+ <li>{{cssxref("@font-face/font-style", "font-style")}}</li>
+ <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
+ <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
+ <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
+ <li>{{cssxref("@font-face/src", "src")}}</li>
+ <li>{{cssxref("@font-face/unicode-range", "unicode-range descriptor")}}</li>
+</ul>
diff --git a/files/ja/web/css/@font-face/index.html b/files/ja/web/css/@font-face/index.html
new file mode 100644
index 0000000000..2a501194d9
--- /dev/null
+++ b/files/ja/web/css/@font-face/index.html
@@ -0,0 +1,197 @@
+---
+title: '@font-face'
+slug: Web/CSS/@font-face
+tags:
+ - '@-規則'
+ - '@規則'
+ - CSS
+ - CSS フォント
+ - Reference
+ - フォント
+ - リファレンス
+translation_of: Web/CSS/@font-face
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>@font-face</code></strong> <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>は、テキストを表示するための独自フォントを指定します。フォントはリモートサーバーまたはユーザー自身のコンピューターにローカルにインストールされたフォントのどちらかから読み込むことができます。</span> <code>local()</code> 関数が与えられると、ユーザーのコンピューターで探すフォント名を指定し、{{Glossary("user agent", "ユーザーエージェント")}}がそれを見つけることができれば、そのローカルフォントを使用します。そうでなければ、 <code>url()</code> 関数を使用して指定されたフォントリソースをダウンロードして使用します。</p>
+
+<p><code>@font-face</code> で独自のフォントを提供できるようになることで、 "web-safe" フォント (つまり、広く利用できると考えられるほど一般的なフォント) と呼ばれる制限なしにコンテンツをデザインすることができます。ローカルにインストールされているフォントを、名前を指定して検索し使用することができる機能により、インターネット接続に頼らなくてもフォントを基本的なものからカスタマイズすることができるようになります。</p>
+
+<p><code>url()</code> と <code>local()</code> を両方とも使用することは一般的であり、そうすることでユーザーのインストールされたフォントのコピーが利用できればそれを利用し、ユーザーの端末に見つからない場合はフォントのコピーを代替としてダウンロードすることができます。</p>
+
+<p><code>@font-face</code> @-規則は、 CSS の最上位だけでなく、 <a href="/ja/docs/Web/CSS/At-rule#Conditional_group_rules">CSS の条件付き @-規則グループ</a>の中でも使用することができます。</p>
+
+<pre class="brush: css no-line-numbers">@font-face {
+ font-family: "Open Sans";
+ src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+ url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+}</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Descriptors" name="Descriptors">記述子</h3>
+
+<dl>
+ <dt>{{cssxref("@font-face/font-display", "font-display")}}</dt>
+ <dd>フォントのダウンロード及び準備状況に応じて、どのようにフォントフェイスを表示するかを特定します。</dd>
+ <dt>{{cssxref("@font-face/font-family", "font-family")}}</dt>
+ <dd>font プロパティの font face 値で使われる名前を指定します。</dd>
+ <dt>{{cssxref("@font-face/font-stretch", "font-stretch")}}</dt>
+ <dd>{{cssxref("font-stretch")}} 値です。 Firefox 61 以降 (及びその他の最近のブラウザーの多く) では、font-face で対応している範囲を指定するために、 <code>font-stretch: 50% 200%;</code> のように二つの値を受け付けます。</dd>
+ <dt>{{cssxref("@font-face/font-style", "font-style")}}</dt>
+ <dd>{{cssxref("font-style")}} 値です。 Firefox 61 以降 (及びその他の最近のブラウザーの多く) では、font-face で対応している範囲を指定するために、 <code>font-style: oblique 20deg 50deg;</code> のように二つの値を受け付けます。</dd>
+ <dt>{{cssxref("@font-face/font-weight", "font-weight")}}</dt>
+ <dd>{{cssxref("font-weight")}} 値です。 Firefox 61 以降 (及びその他の最近のブラウザーの多く) では、font-face で対応している範囲を指定するために、 <code>font-weight: 100 400;</code> のように二つの値を受け付けます。</dd>
+ <dt>{{cssxref("@font-face/font-variant", "font-variant")}}</dt>
+ <dd>{{cssxref("font-variant")}} 値です。</dd>
+ <dt>{{cssxref("font-feature-settings", "font-feature-settings")}}</dt>
+ <dd>OpenType フォントで高度な印刷機能を制御することができるようにします。</dd>
+ <dt>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</dt>
+ <dd>変化の特徴を表す4文字の軸名を、種類の値と共に指定することにより、 OpenType 又は TrueType フォントの種類を低レベルで制御できます。</dd>
+ <dt>{{cssxref("@font-face/src", "src")}}</dt>
+ <dd>
+ <p>フォントデータを含むリソースを指定します。これでリモートのフォントファイルの位置又はユーザーのコンピューターのフォント名を指定することができます。</p>
+
+ <p>ブラウザーにフォントのリソースがどの形式であるかのヒントを提供するために — それで最適なものを選択できます — <code>format()</code> 関数の中に形式を含めることができます。</p>
+
+ <pre class="brush: css">src: url(ideal-sans-serif.woff) <strong>format("woff")</strong>,
+ url(basic-sans-serif.ttf) <strong>format("truetype")</strong>;</pre>
+
+ <p>利用可能な形式は、<code>"woff"</code>, <code>"woff2"</code>, <code>"truetype"</code>, <code>"opentype"</code>, <code>"embedded-opentype"</code>, <code>"svg"</code> です。</p>
+ </dd>
+ <dt>{{cssxref("@font-face/unicode-range", "unicode-range")}}</dt>
+ <dd>フォントで使用される Unicode コードポイントの範囲です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例は単にダウンロードフォントを指定し、ドキュメントの本文全体に適用します。</p>
+
+<p><a href="https://mdn.mozillademos.org/files/7775/webfont-sample.html">動作例を見る</a></p>
+
+<pre class="brush: html">&lt;html&gt;
+&lt;head&gt;
+ &lt;title&gt;Web Font Sample&lt;/title&gt;
+ &lt;style type="text/css" media="screen, print"&gt;
+ @font-face {
+ font-family: "Bitstream Vera Serif Bold";
+ src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
+ }
+
+ body { font-family: "Bitstream Vera Serif Bold", serif }
+ &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+ This is Bitstream Vera Serif Bold.
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>この例では、ユーザーのローカルにある "Helvetica Neue Bold" が使用されます。もしユーザーがそのフォントをインストールしていない場合は (二つの異なる名前が試されます)、代わりに "MgOpenModernaBold.ttf" という名前のダウンロードフォントが使用されます。</p>
+
+<pre class="brush: css">@font-face {
+ font-family: MyHelvetica;
+ src: local("Helvetica Neue Bold"),
+ local("HelveticaNeue-Bold"),
+ url(MgOpenModernaBold.ttf);
+ font-weight: bold;
+}
+</pre>
+
+<h2 id="Font_MIME_Types" name="Font_MIME_Types">フォントの MIME タイプ</h2>
+
+<table>
+ <thead>
+ <tr>
+ <th>形式</th>
+ <th>MIME タイプ</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>TrueType</td>
+ <td><code>font/ttf</code></td>
+ </tr>
+ <tr>
+ <td>OpenType</td>
+ <td><code>font/otf</code></td>
+ </tr>
+ <tr>
+ <td>Web Open File Format</td>
+ <td><code>font/woff</code></td>
+ </tr>
+ <tr>
+ <td>Web Open File Format 2</td>
+ <td><code>font/woff2</code></td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Notes" name="Notes">メモ</h2>
+
+<ul>
+ <li>フォントのダウンロードは、同一ドメイン制約に従います (フォントファイルは、それらが使用されているページと同じドメインにある必要があります)。 <a href="/ja/docs/HTTP_access_control">HTTP アクセス制御</a>によりこの制限を緩和できます。</li>
+ <li><code>@font-face</code> は CSS セレクターの中で宣言することはできません。例えば、次の例は動作しません。
+ <pre class="brush: css; example-bad">.className {
+ @font-face {
+ font-family: MyHelvetica;
+ src: local("Helvetica Neue Bold"),
+ local("HelveticaNeue-Bold"),
+ url(MgOpenModernaBold.ttf);
+ font-weight: bold;
+ }
+}</pre>
+ </li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">仕様書</th>
+ <th scope="col">状態</th>
+ <th scope="col">備考</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('WOFF2.0', '', 'WOFF2 font format')}}</td>
+ <td>{{Spec2('WOFF2.0')}}</td>
+ <td>新しい圧縮アルゴリズムのフォント形式を定義</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('WOFF1.0', '', 'WOFF font format')}}</td>
+ <td>{{Spec2('WOFF1.0')}}</td>
+ <td>フォント形式の定義</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}</td>
+ <td>{{Spec2('CSS3 Fonts')}}</td>
+ <td>初回定義</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.font-face")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/WOFF">WOFF について</a></li>
+ <li><a href="https://everythingfonts.com/font-face">Everythingfonts font-face generator</a></li>
+ <li><a class="external" href="http://www.fontsquirrel.com/fontface/generator">FontSquirrel @font-face generator</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Beautiful fonts with @font-face</a></li>
+ <li><a class="external" href="http://openfontlibrary.org/">Open Font Library</a></li>
+ <li><a class="external" href="http://caniuse.com/woff">When can I use WOFF?</a></li>
+ <li><a class="external" href="http://caniuse.com/svg-fonts">When can I use SVG Fonts?</a></li>
+ <li><a href="https://coolfont.org">Free Fancy Cool Fonts</a></li>
+</ul>
diff --git a/files/ja/web/css/@font-face/src/index.html b/files/ja/web/css/@font-face/src/index.html
new file mode 100644
index 0000000000..3e1b90b644
--- /dev/null
+++ b/files/ja/web/css/@font-face/src/index.html
@@ -0,0 +1,110 @@
+---
+title: src
+slug: Web/CSS/@font-face/src
+tags:
+ - '@font-face'
+ - At-rule descriptor
+ - CSS
+ - CSS Descriptor
+ - CSS Fonts
+ - CSS Property
+ - Reference
+translation_of: Web/CSS/@font-face/src
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>src</code></strong> は CSS における {{cssxref("@font-face")}} 規則の 記述子で、フォントデータを含むリソースを指定します。 <code>@font-face</code> 規則を有効にするためには必要です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css notranslate">/* &lt;url&gt; 値 */
+src: url(https://somewebsite.com/path/to/font.woff); /* 絶対 URL */
+src: url(path/to/font.woff); /* 相対 URL */
+src: url(path/to/font.woff) format("woff"); /* 明示的な書式 */
+src: url('path/to/font.woff'); /* 引用符付きの URL */
+src: url(path/to/svgfont.svg#example); /* フラグメントで識別するフォント */
+
+/* &lt;font-face-name&gt; 値 */
+src: local(font); /* 引用符なしの名前 */
+src: local(some font); /* 空白が入った名前 */
+src: local("font"); /* 引用符付きの名前 */
+
+/* 複数の項目 */
+src: local(font), url(path/to/font.svg) format("svg"),
+ url(path/to/font.woff) format("woff"),
+ url(path/to/font.otf) format("opentype");
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;url&gt; [ format( &lt;string&gt;# ) ]?</code></dt>
+ <dd>{{cssxref("&lt;url&gt;")}} と、続けて任意で <code id="format()">format()</code> 関数で URL で参照するフォントリソースの形式を記述して外部参照を指定します。形式のヒントには、知られているフォント形式を示す書式文字列をカンマで区切ったリストを指定します。ユーザーエージェントが指定した形式に対応していない場合は、フォントリソースをのダウンロードを飛ばします。形式のヒントが指定されていない場合は、フォントリソースはが常にダウンロードされます。</dd>
+ <dt><code>&lt;font-face-name&gt;</code></dt>
+ <dd><code id="local()">local()</code> を使用して、ローカルに導入されたフォントフェイスを、より大きなフォントファミリ内で単一のフォントフェイスを一意に識別する名前で指定します。任意で名前を引用符で囲むことができます。</dd>
+</dl>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p>値は、外部参照またはローカルにインストールされたフォントフェイス名を、カンマで区切った優先度付きリストです。フォントが必要になった時、{{glossary("user agent", "ユーザーエージェント")}}はリスト上の参照を走査し、アクティブ化に成功した最初の物を使用します。無効なデータを持ったフォントや見つからないローカルのフォントは無視され、ユーザーエージェントはリスト上の次のフォントを読み込みます。</p>
+
+<p>CSS のその他の URL と同様に、相対 URL を使用することができ、この場合は <code>@font-face</code> 規則を含むスタイルシートの位置からの相対になります。 SVG フォントの場合、 URL は SVG フォント定義を含む文書内の要素を指します。要素への参照が省略された場合は、参照は最初に定義されたフォントを含みます。同様に、複数のフォントを持つフォントコンテナー形式では、 <code>@font-face</code> 規則で指定された一つだけを読み込みます。読み込むフォントを示すためにはフラグメント識別子を使用します。コンテナー形式がフラグメントで識別する方法を持たない場合は、1から始まる添字 (例えば "font-collection#1" が最初のフォント、 "font-collection#2" が二番目のフォント、など) が使用されます。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Specifying_font_resources_using_url_and_local" name="Specifying_font_resources_using_url_and_local">url() と local() を使用したフォントリソースの指定</h3>
+
+<pre class="brush: css notranslate">@font-face {
+ font-family: examplefont;
+ src: local(Example Font),
+ url('examplefont.woff') format("woff"),
+ url('examplefont.otf') format("opentype");
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<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', '#src-desc', 'src')}}</td>
+ <td>{{Spec2('CSS3 Fonts')}}</td>
+ <td>初回定義</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.at-rules.font-face.src")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("@font-face/font-display", "font-display")}}</li>
+ <li>{{cssxref("@font-face/font-family", "font-family")}}</li>
+ <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
+ <li>{{cssxref("@font-face/font-style", "font-style")}}</li>
+ <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
+ <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
+ <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
+ <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
+ <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li>
+</ul>
diff --git a/files/ja/web/css/@font-face/unicode-range/index.html b/files/ja/web/css/@font-face/unicode-range/index.html
new file mode 100644
index 0000000000..691d5e7f17
--- /dev/null
+++ b/files/ja/web/css/@font-face/unicode-range/index.html
@@ -0,0 +1,118 @@
+---
+title: unicode-range
+slug: Web/CSS/@font-face/unicode-range
+tags:
+ - At-rule descriptor
+ - CSS
+ - CSS Fonts
+ - CSS Property
+ - Experimental
+ - Layout
+ - Reference
+ - Web
+translation_of: Web/CSS/@font-face/unicode-range
+---
+<div>{{cssref}}</div>
+
+<p><strong><code>unicode-range</code></strong> は CSS の記述子で、 {{cssxref("@font-face")}} で定義されたフォントから使用される特定の文字範囲を設定し、現在のページで使用できるようにします。ページがこの範囲内の文字を使用しない場合、フォントはダウンロードされません。少なくとも 1 つの文字を使用すると、フォント全体がダウンロードされます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css notranslate">/* &lt;unicode-range&gt; 値 */
+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>
+
+<dl>
+ <dt><em><strong>単一の符号位置</strong></em></dt>
+ <dd>単一の Unicode 符号位置。例: <code>U+26</code>.</dd>
+ <dt><em><strong>符号位置の範囲</strong></em></dt>
+ <dd>Unicode 符号位置の範囲。例えば、 <code>U+0025-00FF</code> は、 <em><code>U+0025</code> から <code>U+00FF</code> の範囲内の全文字を含む</em>こと意味します。</dd>
+ <dt><em><strong>ワイルドカードの範囲</strong></em></dt>
+ <dd>ワイルドカード文字を含む Unicode 符号位置の範囲。 <code>'?'</code> 文字を使用します。例えば、<code>U+4??</code> は <em><code>U+400</code> から <code>U+4FF</code> の範囲の全文字を含む</em>ことを意味します。</dd>
+</dl>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p>この記述子の目的は、ブラウザーが特定のページのテキストコンテンツに必要なフォントリソースをダウンロードするだけで済むように、フォントリソースをセグメント化できるようにすることです。たとえば、ローカライズが多いサイトでは、英語、ギリシャ語、日本語のフォントリソースを個別に提供できます。英語版のページを閲覧しているユーザーには、ギリシャ語と日本語のフォントのフォントリソースをダウンロードする必要はなく、帯域幅を節約できます。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Using_a_different_font_for_a_single_character">Using a different font for a single character</h3>
+
+<p>異なるフォントでスタイルを設定したいアンパサンド (アンド記号) を含む 1 つの {{HTMLElement("div")}} 要素を持つだけの HTML を作成します。明確にするために、テキストにはサンセリフフォントの <em>Helvetica</em> を使用し、アンパサンドにはセリフフォントの <em>Times New Roman</em> を使用します。</p>
+
+<p>CSS において、1 つの文字だけを含んだ完全に別個の {{cssxref("@font-face")}} を定義していることが分かります。つまりこの文字だけがこのフォントでスタイルされることになります。これはアンパサンドを {{HTMLElement("span")}} 内に入れて別のフォントを適用することによっても可能ですが、それには余分な要素とルールセットが必要です。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Me &amp; You = Us&lt;/div&gt;</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>
+
+<p>{{EmbedLiveSample("Using_a_different_font_for_a_single_character", 500,104)}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<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>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.at-rules.font-face.unicode-range")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("@font-face/font-display", "font-display")}}</li>
+ <li>{{cssxref("@font-face/font-family", "font-family")}}</li>
+ <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
+ <li>{{cssxref("@font-face/font-style", "font-style")}}</li>
+ <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
+ <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
+ <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
+ <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
+ <li>{{cssxref("@font-face/src", "src")}}</li>
+</ul>
generated by cgit v1.2.3-54-g00ecf (git 2.39.0) at 2025-01-07 17:32:51 +0000