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
|
---
title: font-variant-numeric
slug: Web/CSS/font-variant-numeric
tags:
- CSS
- CSS フォント
- CSS プロパティ
- リファレンス
translation_of: Web/CSS/font-variant-numeric
---
<div>{{CSSRef}}</div>
<p>CSS の <strong><code>font-variant-numeric</code></strong> プロパティは、数字、分数、序数記号の表記を制御するために使用します。</p>
<div>{{EmbedInteractiveExample("pages/css/font-variant-numeric.html")}}</div>
<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="brush:css no-line-numbers">font-variant-numeric: normal;
font-variant-numeric: ordinal;
font-variant-numeric: slashed-zero;
font-variant-numeric: lining-nums; /* <numeric-figure-values> */
font-variant-numeric: oldstyle-nums; /* <numeric-figure-values> */
font-variant-numeric: proportional-nums; /* <numeric-spacing-values> */
font-variant-numeric: tabular-nums; /* <numeric-spacing-values> */
font-variant-numeric: diagonal-fractions; /* <numeric-fraction-values> */
font-variant-numeric: stacked-fractions; /* <numeric-fraction-values> */
font-variant-numeric: oldstyle-nums stacked-fractions;
/* グローバル値 */
font-variant-numeric: inherit;
font-variant-numeric: initial;
font-variant-numeric: unset;
</pre>
<p>このプロパティは二つの形のうちの一つを取ります。</p>
<ul>
<li>キーワード値 <code>normal</code></li>
<li>以下の一覧にあるその他の値を空白区切り、自由な順番で</li>
</ul>
<h3 id="Values" name="Values">値</h3>
<dl>
<dt><code>normal</code></dt>
<dd>このキーワードは、別形式の表記の使用を無効にします。</dd>
<dt><code>ordinal</code></dt>
<dd>このキーワードは、序数記号に対して特別な表記を使用します。英語では 1<sup>st</sup>, 2<sup>nd</sup>, 3<sup>rd</sup>, 4<sup>th</sup>、イタリア語では 1<sup>a</sup> です。 OpenType の <code>ordn</code> の値に対応します。</dd>
<dt><code>slashed-zero</code></dt>
<dd>このキーワードは、スラッシュ付きの 0 を使用します。これは O と 0 を明確に区別する必要がある場合に便利です。 OpenType の <code>zero</code> の値に対応します。</dd>
<dt><em><numeric-figure-values</em>></dt>
<dd>これらの値は、数字の形状を制御します。二つの値が利用できます。
<ul>
<li><code>lining-nums</code> は、全てをベースライン上に並べる表記を有効にします。 OpenType の <code>lnum</code> の値に対応します。</li>
<li><code>oldstyle-nums</code> は、 3, 4, 7, 9 などいくつかの数字を下げる表記を有効にします。 OpenType の <code>onum</code> の値に対応します。</li>
</ul>
</dd>
<dt><em><numeric-spacing-values</em>></dt>
<dd>これらの値は、数字の表記の大きさを制御します。二つの値が利用できます。
<ul>
<li><code>proportional-nums</code> は、数字をすべて同じ大きさにしない表記を有効にします。 OpenType の <code>pnum</code> の値に対応します。</li>
<li><code>tabular-nums</code> は、数字を同じ大きさにする表記を有効にし、表の中に配置しやすくします。 OpenType の <code>tnum</code> の値に対応します。</li>
</ul>
</dd>
<dt><em><numeric-fraction-values</em>></dt>
<dd>これらの値は、分数の表示に使う表記を制御します。二つの値が利用できます。
<ul>
<li><code>diagonal-fractions</code> は、分子と分母が小さめになり、スラッシュで区切られる表記を有効にします。 OpenType の <code>frac</code> の値に対応します。</li>
<li><code>stacked-fractions</code> は、分子と分母が小さめになり、積み重ねられて水平線で区切られた表記を有効にします。 OpenType の <code>afrc</code> の値に対応します。</li>
</ul>
</dd>
</dl>
<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
{{csssyntax}}
<h2 id="Examples" name="Examples">例</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">/*
This example uses the Source Sans Pro OpenType font, developed by Adobe
and used here under the terms of the SIL Open Font License, Version 1.1:
http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
*/
@font-face {
font-family: "Source Sans Pro";
font-style: normal;
font-weight: 400;
src: url("https://mdn.mozillademos.org/files/15757/SourceSansPro-Regular.otf") format("opentype");
}
.ordinal {
font-variant-numeric: ordinal;
font-family: "Source Sans Pro";
}
</pre>
<h3 id="Result" name="Result">結果</h3>
<p>{{EmbedLiveSample('Examples')}}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th>仕様書</th>
<th>状況</th>
<th>備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-numeric', 'font-variant-numeric')}}</td>
<td>{{Spec2('CSS3 Fonts')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">ブラウザーの対応</h2>
<p>{{Compat("css.properties.font-variant-numeric")}}</p>
|
