diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-11-06 01:12:30 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-11-13 15:42:31 +0900 |
commit | 917858acd763bfb1f5d1e794c4f3bf45d00f3666 (patch) | |
tree | 6f90ec810833b13d0e79eb1e894242f563743eb2 /files/ja/web/css/font-variant-ligatures | |
parent | ce4c4c52ab46ed108664ebc833eeab8d80bbe2f2 (diff) | |
download | translated-content-917858acd763bfb1f5d1e794c4f3bf45d00f3666.tar.gz translated-content-917858acd763bfb1f5d1e794c4f3bf45d00f3666.tar.bz2 translated-content-917858acd763bfb1f5d1e794c4f3bf45d00f3666.zip |
CSS Fonts の各プロパティを更新
- 2021/11/05 時点の英語版に同期
Diffstat (limited to 'files/ja/web/css/font-variant-ligatures')
-rw-r--r-- | files/ja/web/css/font-variant-ligatures/index.md | 261 |
1 files changed, 127 insertions, 134 deletions
diff --git a/files/ja/web/css/font-variant-ligatures/index.md b/files/ja/web/css/font-variant-ligatures/index.md index edf996a99a..b92d56a4ef 100644 --- a/files/ja/web/css/font-variant-ligatures/index.md +++ b/files/ja/web/css/font-variant-ligatures/index.md @@ -3,144 +3,143 @@ title: font-variant-ligatures slug: Web/CSS/font-variant-ligatures tags: - CSS - - CSS Fonts - - CSS Property - - Reference - - 'recipe:css-property' + - CSS フォント + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.font-variant-ligatures translation_of: Web/CSS/font-variant-ligatures --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><strong><code>font-variant-ligatures</code></strong> は CSS のプロパティで、適用される用途の文字コンテンツで使われる{{Glossary("ligature", "合字")}}および{{Glossary("contextual forms", "文脈に合わせた字形")}}を制御します。</span>これにより、結果のテキストでより調和した形を利用することができます。</p> +**`font-variant-ligatures`** は CSS のプロパティで、適用される用途の文字コンテンツで使われる{{Glossary("ligature", "合字")}}および{{Glossary("contextual forms", "文脈に合わせた字形")}}を制御します。これにより、結果のテキストでより調和した形を利用することができます。 -<div>{{EmbedInteractiveExample("pages/css/font-variant-ligatures.html")}}</div> +{{EmbedInteractiveExample("pages/css/font-variant-ligatures.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ font-variant-ligatures: normal; font-variant-ligatures: none; -font-variant-ligatures: common-ligatures; /* <common-lig-values> */ -font-variant-ligatures: no-common-ligatures; /* <common-lig-values> */ -font-variant-ligatures: discretionary-ligatures; /* <discretionary-lig-values> */ -font-variant-ligatures: no-discretionary-ligatures; /* <discretionary-lig-values> */ -font-variant-ligatures: historical-ligatures; /* <historical-lig-values> */ -font-variant-ligatures: no-historical-ligatures; /* <historical-lig-values> */ -font-variant-ligatures: contextual; /* <contextual-alt-values> */ -font-variant-ligatures: no-contextual; /* <contextual-alt-values> */ +font-variant-ligatures: common-ligatures; /* <common-lig-values> */ +font-variant-ligatures: no-common-ligatures; /* <common-lig-values> */ +font-variant-ligatures: discretionary-ligatures; /* <discretionary-lig-values> */ +font-variant-ligatures: no-discretionary-ligatures; /* <discretionary-lig-values> */ +font-variant-ligatures: historical-ligatures; /* <historical-lig-values> */ +font-variant-ligatures: no-historical-ligatures; /* <historical-lig-values> */ +font-variant-ligatures: contextual; /* <contextual-alt-values> */ +font-variant-ligatures: no-contextual; /* <contextual-alt-values> */ /* グローバル値 */ font-variant-ligatures: inherit; font-variant-ligatures: initial; +font-variant-ligatures: revert; font-variant-ligatures: unset; -</pre> - -<p><code>font-variant-ligatures</code> プロパティは、以下の一覧のキーワード値のうち一つで指定します。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>normal</code></dt> - <dd>正しいレンダリングに必要な通常の合字や文脈書式を有効にします。有効になる合字と書式は、フォント、言語、および書法の種類によって異なります。これが既定値です。</dd> - <dt><code>none</code></dt> - <dd>一般的なものであっても、すべての合字や文脈書式を無効にします。</dd> - <dt><em><common-lig-values></em></dt> - <dd><code>fi</code>, <code>ffi</code>, <code>th</code> などの、よくある合字を制御します。 OpenType の値 <code>liga</code> および <code>clig</code> に対応します。二つの値が指定できます。 - <ul> - <li><code>common-ligatures</code>: これらの合字を有効にします。なお、キーワード <code>normal</code> はこれらの合字を有効にします。</li> - <li><code>no-common-ligatures</code>: これらの合字を無効にします。</li> - </ul> - </dd> - <dt><em><discretionary-lig-values></em></dt> - <dd>フォントに依存し文字デザイナーが定義する特定の合字を制御します。対応する OpenType の値は <code>dlig</code> です。二つの値が指定できます。 - <ul> - <li><code>discretionary-ligatures</code>: これらの合字を有効にします。</li> - <li><code>no-discretionary-ligatures</code>: これらの合字を無効にします。なお、キーワード <code>normal</code> はふつう、これらの合字を無効にします。</li> - </ul> - </dd> - <dt><em><historical-lig-values></em></dt> - <dd>古い本で歴史的に使用された、ドイツ語の tz を ꜩ と表示するような合字です。対応する OpenType の値は <code>hlig</code> です。二つの値が指定できます。 - <ul> - <li><code>historical-ligatures</code>: これらの合字を有効にします。</li> - <li><code>no-historical-ligatures</code> これらの合字を無効にします。なお、キーワード <code>normal</code> はふつう、これらの合字を無効にします。</li> - </ul> - </dd> - <dt><em><contextual-alt-values></em></dt> - <dd>字形を文脈に合わせるかどうかを制御します。つまり、字形を周囲の文字に合わせるかどうかです。対応する OpenType の値は <code>calt</code> です。二つの値が指定できます。 - <ul> - <li><code>contextual</code>: 文脈的な変更を使用するよう指定します。なお、キーワード <code>normal</code> はこれらの合字も有効にします。</li> - <li><code>no-contextual</code>: 使用を避けます。</li> - </ul> - </dd> -</dl> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +``` + +`font-variant-ligatures` プロパティは、以下の一覧のキーワード値のうち一つで指定します。 + +### 値 + +- `normal` + - : 正しいレンダリングに必要な通常の合字や文脈書式を有効にします。有効になる合字と書式は、フォント、言語、および書法の種類によって異なります。これが既定値です。 +- `none` + - : 一般的なものであっても、すべての合字や文脈書式を無効にします。 +- _\<common-lig-values>_ + + - : `fi`, `ffi`, `th` などの、よくある合字を制御します。 OpenType の値 `liga` および `clig` に対応します。2 つの値が指定できます。 + + - `common-ligatures`: これらの合字を有効にします。なお、キーワード `normal` はこれらの合字を有効にします。 + - `no-common-ligatures`: これらの合字を無効にします。 + +- _\<discretionary-lig-values>_ + + - : フォントに依存し文字デザイナーが定義する特定の合字を制御します。対応する OpenType の値は `dlig` です。2 つの値が指定できます。 + + - `discretionary-ligatures`: これらの合字を有効にします。 + - `no-discretionary-ligatures`: これらの合字を無効にします。なお、キーワード `normal` はふつう、これらの合字を無効にします。 + +- _\<historical-lig-values>_ + + - : 古い本で歴史的に使用された、ドイツ語の tz を ꜩ と表示するような合字です。対応する OpenType の値は `hlig` です。2 つの値が指定できます。 + + - `historical-ligatures`: これらの合字を有効にします。 + - `no-historical-ligatures` これらの合字を無効にします。なお、キーワード `normal` はふつう、これらの合字を無効にします。 + +- _\<contextual-alt-values>_ + + - : 字形を文脈に合わせるかどうかを制御します。つまり、字形を周囲の文字に合わせるかどうかです。対応する OpenType の値は `calt` です。2 つの値が指定できます。 + + - `contextual`: 文脈的な変更を使用するよう指定します。なお、キーワード `normal` はこれらの合字も有効にします。 + - `no-contextual`: 使用を避けます。 + +## 公式定義 + +{{cssinfo}} + +## 形式定義 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Setting_font_ligatures_and_contextual_forms" name="Setting_font_ligatures_and_contextual_forms">フォントの合字と文脈に合わせた字形の設定</h3> +<h3 id="Setting_font_ligatures_and_contextual_forms">フォントの合字と文脈に合わせた字形の設定</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet"> -<p class="normal"> - normal<br> +```html +<link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet"> +<p class="normal"> + normal<br> if fi ff tf ft jf fj -</p> -<p class="none"> - none<br> +</p> +<p class="none"> + none<br> if fi ff tf ft jf fj -</p> -<p class="common-ligatures"> - common-ligatures<br> +</p> +<p class="common-ligatures"> + common-ligatures<br> if fi ff tf ft jf fj -</p> -<p class="no-common-ligatures"> - no-common-ligatures<br> +</p> +<p class="no-common-ligatures"> + no-common-ligatures<br> if fi ff tf ft jf fj -</p> -<p class="discretionary-ligatures"> - discretionary-ligatures<br> +</p> +<p class="discretionary-ligatures"> + discretionary-ligatures<br> if fi ff tf ft jf fj -</p> -<p class="no-discretionary-ligatures"> - no-discretionary-ligatures<br> +</p> +<p class="no-discretionary-ligatures"> + no-discretionary-ligatures<br> if fi ff tf ft jf fj -</p> -<p class="historical-ligatures"> - historical-ligatures<br> +</p> +<p class="historical-ligatures"> + historical-ligatures<br> if fi ff tf ft jf fj -</p> -<p class="no-historical-ligatures"> - no-historical-ligatures<br> +</p> +<p class="no-historical-ligatures"> + no-historical-ligatures<br> if fi ff tf ft jf fj -</p> -<p class="contextual"> - contextual<br> +</p> +<p class="contextual"> + contextual<br> if fi ff tf ft jf fj -</p> -<p class="no-contextual"> - no-contextual<br> +</p> +<p class="no-contextual"> + no-contextual<br> if fi ff tf ft jf fj -</p> -<p class="contextual"> - contextual<br> +</p> +<p class="contextual"> + contextual<br> if fi ff tf ft jf fj -</p> +</p> +``` -</pre> +#### CSS -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">p { +```css +p { font-family: Lora, serif; } .normal { @@ -185,31 +184,25 @@ font-variant-ligatures: unset; .contextual { font-variant-ligatures: contextual; -}</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{ EmbedLiveSample('Setting_font_ligatures_and_contextual_forms', '', '700', '', 'Web/CSS/font-variant-ligatures') }}</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', '#propdef-font-variant-ligatures', 'font-variant-ligatures')}}</td> - <td>{{Spec2('CSS3 Fonts')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.font-variant-ligatures")}}</p> +} +``` + +#### 結果 + +{{ EmbedLiveSample('Setting_font_ligatures_and_contextual_forms', '', '700', '', 'Web/CSS/font-variant-ligatures') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("font-variant-alternates")}} +- {{cssxref("font-variant-caps")}} +- {{cssxref("font-variant-east-asian")}} +- {{cssxref("font-variant")}} +- {{cssxref("font-variant-numeric")}} |