blob: b92d56a4efd5467f9e21f61df4f81b562e6c7ec9 (
plain)
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
|
---
title: font-variant-ligatures
slug: Web/CSS/font-variant-ligatures
tags:
- CSS
- CSS フォント
- CSS プロパティ
- リファレンス
- recipe:css-property
browser-compat: css.properties.font-variant-ligatures
translation_of: Web/CSS/font-variant-ligatures
---
{{CSSRef}}
**`font-variant-ligatures`** は CSS のプロパティで、適用される用途の文字コンテンツで使われる{{Glossary("ligature", "合字")}}および{{Glossary("contextual forms", "文脈に合わせた字形")}}を制御します。これにより、結果のテキストでより調和した形を利用することができます。
{{EmbedInteractiveExample("pages/css/font-variant-ligatures.html")}}
## 構文
```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: inherit;
font-variant-ligatures: initial;
font-variant-ligatures: revert;
font-variant-ligatures: unset;
```
`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}}
## 例
<h3 id="Setting_font_ligatures_and_contextual_forms">フォントの合字と文脈に合わせた字形の設定</h3>
#### HTML
```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
```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') }}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- {{cssxref("font-variant-alternates")}}
- {{cssxref("font-variant-caps")}}
- {{cssxref("font-variant-east-asian")}}
- {{cssxref("font-variant")}}
- {{cssxref("font-variant-numeric")}}
|
