From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/font-variant-ligatures/index.html | 217 +++++++++++++++++++++ 1 file changed, 217 insertions(+) create mode 100644 files/ja/web/css/font-variant-ligatures/index.html (limited to 'files/ja/web/css/font-variant-ligatures') diff --git a/files/ja/web/css/font-variant-ligatures/index.html b/files/ja/web/css/font-variant-ligatures/index.html new file mode 100644 index 0000000000..7fd0d237ff --- /dev/null +++ b/files/ja/web/css/font-variant-ligatures/index.html @@ -0,0 +1,217 @@ +--- +title: font-variant-ligatures +slug: Web/CSS/font-variant-ligatures +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/font-variant-ligatures +--- +
{{CSSRef}}
+ +

font-variant-ligatures は CSS のプロパティで、適用される用途の文字コンテンツで使われる{{Glossary("ligature", "合字")}}および{{Glossary("contextual forms", "文脈に合わせた字形")}}を制御します。これにより、結果のテキストでより調和した形を利用することができます。

+ +
{{EmbedInteractiveExample("pages/css/font-variant-ligatures.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+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: inherit;
+font-variant-ligatures: initial;
+font-variant-ligatures: unset;
+
+ +

font-variant-ligatures プロパティは、以下の一覧のキーワード値のうち一つで指定します。

+ +

値

+ +
+
normal
+
正しいレンダリングに必要な通常の合字や文脈書式を有効にします。有効になる合字と書式は、フォント、言語、および書法の種類によって異なります。これが既定値です。
+
none
+
一般的なものであっても、すべての合字や文脈書式を無効にします。
+
<common-lig-values>
+
fi, ffi, th などの、よくある合字を制御します。 OpenType の値 liga および clig に対応します。二つの値が指定できます。 +
    +
  • common-ligatures: これらの合字を有効にします。なお、キーワード normal はこれらの合字を有効にします。
    • +
  • no-common-ligatures: これらの合字を無効にします。
    • +
+
+
<discretionary-lig-values>
+
フォントに依存し文字デザイナーが定義する特定の合字を制御します。対応する OpenType の値は dlig です。二つの値が指定できます。 +
    +
  • discretionary-ligatures: これらの合字を有効にします。
    • +
  • no-discretionary-ligatures: これらの合字を無効にします。なお、キーワード normal はふつう、これらの合字を無効にします。
    • +
+
+
<historical-lig-values>
+
古い本で歴史的に使用された、ドイツ語の tz を ꜩ と表示するような合字です。対応する OpenType の値は hlig です。二つの値が指定できます。 +
    +
  • historical-ligatures: これらの合字を有効にします。
    • +
  • no-historical-ligatures これらの合字を無効にします。なお、キーワード normal はふつう、これらの合字を無効にします。
    • +
+
+
<contextual-alt-values>
+
字形を文脈に合わせるかどうかを制御します。つまり、字形を周囲の文字に合わせるかどうかです。対応する OpenType の値は calt です。二つの値が指定できます。 +
    +
  • contextual: 文脈的な変更を使用するよう指定します。なお、キーワード normal はこれらの合字も有効にします。
    • +
  • no-contextual: 使用を避けます。
    • +
+
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

フォントの合字と文脈に合わせた字形の設定

+ +

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>
+  if fi ff tf ft jf fj
+</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>
+  if fi ff tf ft jf fj
+</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>
+  if fi ff tf ft jf fj
+</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>
+  if fi ff tf ft jf fj
+</p>
+<p class="contextual">
+  contextual<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="no-contextual">
+  no-contextual<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="contextual">
+  contextual<br>
+  if fi ff tf ft jf fj
+</p>
+
+
+ +

CSS

+ +
p {
+  font-family: Lora, serif;
+}
+.normal {
+  font-variant-ligatures: normal;
+}
+
+.none {
+  font-variant-ligatures: none;
+}
+
+.common-ligatures {
+  font-variant-ligatures: common-ligatures;
+}
+
+.no-common-ligatures {
+  font-variant-ligatures: no-common-ligatures;
+}
+
+.discretionary-ligatures {
+  font-variant-ligatures: discretionary-ligatures;
+}
+
+.no-discretionary-ligatures {
+  font-variant-ligatures: no-discretionary-ligatures;
+}
+
+.historical-ligatures {
+  font-variant-ligatures: historical-ligatures;
+}
+
+.no-historical-ligatures {
+  font-variant-ligatures: no-historical-ligatures;
+}
+
+.contextual {
+  font-variant-ligatures: contextual;
+}
+
+.no-contextual {
+  font-variant-ligatures: no-contextual;
+}
+
+.contextual {
+  font-variant-ligatures: contextual;
+}
+ +

結果

+ +

{{ EmbedLiveSample('Setting_font_ligatures_and_contextual_forms', '', '700', '', 'Web/CSS/font-variant-ligatures') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fonts', '#propdef-font-variant-ligatures', 'font-variant-ligatures')}}{{Spec2('CSS3 Fonts')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.font-variant-ligatures")}}

-- cgit v1.2.3-54-g00ecf