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
|
---
title: font-variant
slug: Web/CSS/font-variant
tags:
- CSS
- CSS Fonts
- CSS Property
- Reference
- 'recipe:css-shorthand-property'
translation_of: Web/CSS/font-variant
---
<div>{{CSSRef}}</div>
<p><strong><code>font-variant</code></strong> は CSS の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>で、フォントのすべての変化形を設定することができます。</p>
<p>CSS Level 2 (Revision 1) における <code>font-variant</code> の値 (つまり、 <code>normal</code> や <code>small-caps</code>) は、一括指定の {{cssxref("font")}} を用いて設定することもできます。</p>
<div>{{EmbedInteractiveExample("pages/css/font-variant.html")}}</div>
<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2>
<p>このプロパティは以下の CSS プロパティの一括指定です。</p>
<ul>
<li>{{cssxref("font-variant-alternates")}}</li>
<li>{{cssxref("font-variant-caps")}}</li>
<li>{{cssxref("font-variant-east-asian")}}</li>
<li>{{cssxref("font-variant-ligatures")}}</li>
<li>{{cssxref("font-variant-numeric")}}</li>
</ul>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="brush:css no-line-numbers notranslate">font-variant: small-caps;
font-variant: common-ligatures small-caps;
/* グローバル値 */
font-variant: inherit;
font-variant: initial;
font-variant: unset;
</pre>
<h3 id="Values" name="Values">値</h3>
<dl>
<dt><code>normal</code></dt>
<dd>通常のフォントフェイスを定義します。それぞれの個別指定プロパティは通常の初期値になります。 <code>font-variant</code> の個別指定プロパティは、 {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-east-asian")}} です。</dd>
<dt><code>none</code></dt>
<dd>{{cssxref("font-variant-ligatures")}} を <code>none</code> に、その他の個別指定プロパティを <code>normal</code> に、それぞれの初期値を設定します。</dd>
<dt><code><common-lig-values></code>, <code><discretionary-lig-values></code>, <code><historical-lig-values></code>, <code><contextual-alt-values></code></dt>
<dd>個別指定の {{cssxref("font-variant-ligatures")}} プロパティに関するキーワードを指定します。指定可能な値は、 <code>common-ligatures</code>, <code>no-common-ligatures</code>, <code>discretionary-ligatures</code>, <code>no-discretionary-ligatures</code>, <code>historical-ligatures</code>, <code>no-historical-ligatures</code>, <code>contextual</code>, <code>no-contextual</code> です。</dd>
<dt><code>stylistic()</code>, <code>historical-forms</code>, <code>styleset()</code>, <code>character-variant()</code>, <code>swash()</code>, <code>ornaments()</code>, <code>annotation()</code></dt>
<dd>個別指定の {{cssxref("font-variant-alternates")}} プロパティに関するキーワードや関数を指定します。</dd>
<dt><code>small-caps</code>, <code>all-small-caps</code>, <code>petite-caps</code>, <code>all-petite-caps</code>, <code>unicase</code>, <code>titling-caps</code></dt>
<dd>個別指定の {{cssxref("font-variant-caps")}} プロパティに関するキーワードや関数を指定します。</dd>
<dt><code><numeric-figure-values></code>, <code><numeric-spacing-values></code>, <code><numeric-fraction-values></code>, <code>ordinal</code>, <code>slashed-zero</code></dt>
<dd>個別指定の {{cssxref("font-variant-numeric")}} プロパティに関するキーワードを指定します。指定可能な値は、 <code>lining-nums</code>, <code>oldstyle-nums</code>, <code>proportional-nums</code>, <code>tabular-nums</code>, <code>diagonal-fractions</code>, <code>stacked-fractions</code>, <code>ordinal</code>, <code>slashed-zero</code> です。</dd>
<dt><code><east-asian-variant-values></code>, <code><east-asian-width-values></code>, <code>ruby</code></dt>
<dd>個別指定の {{cssxref("font-variant-east-asian")}} プロパティに関するキーワードを指定します。指定可能な値は、 <code>jis78</code>, <code>jis83</code>, <code>jis90</code>, <code>jis04</code>, <code>simplified</code>, <code>traditional</code>, <code>full-width</code>, <code>proportional-width</code>, <code>ruby</code> です。</dd>
</dl>
<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
<p>{{cssinfo}}</p>
<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
{{csssyntax}}
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Setting_the_small-caps_font_variant" name="Setting_the_small-caps_font_variant">スモールキャップのフォント変化形の設定</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><p class="normal">Firefox rocks!</p>
<p class="small">Firefox rocks!</p>
</pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
</pre>
<h4 id="Result" name="Result">結果</h4>
<p>{{ EmbedLiveSample('Setting_the_small-caps_font_variant', '', '', '', 'Web/CSS/font-variant') }}</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', 'font-variant')}}</td>
<td>{{Spec2('CSS3 Fonts')}}</td>
<td>新しい <code>font-variant-*</code> プロパティの一括指定になった。</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-variant', 'font-variant')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>変更なし</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#font-variant', 'font-variant')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div>
<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.properties.font-variant")}}</p>
</div>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{cssxref("text-transform")}}</li>
<li>{{cssxref("text-combine-upright")}}</li>
<li>{{cssxref("text-orientation")}}</li>
</ul>
|
