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
|
---
title: font-variant-numeric
slug: Web/CSS/font-variant-numeric
translation_of: Web/CSS/font-variant-numeric
---
<div>{{CSSRef}}</div>
<p><strong><code>font-variant-numeric</code></strong> CSS 属性控制数字，分数和序号标记的替代字形的使用。</p>
<div>{{EmbedInteractiveExample("pages/css/font-variant-numeric.html")}}</div>
<h2 id="语法">语法</h2>
<pre class="brush:css no-line-numbers notranslate">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;
/* Global values */
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="值">值</h3>
<dl>
<dt><code>normal</code></dt>
<dd>
<p>下列特性均不启用。</p>
</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 特性 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">zero</span></font>。</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 特性 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">frac</span></font>。</li>
<li><code>stacked-fractions</code> 启用标准分数显示。使分子在上，分母在下，并用水平线分隔。等同于 OpenType 特性 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">afrc</span></font>。</li>
</ul>
</dd>
</dl>
<h2 id="Formal_definition">Formal definition</h2>
<p>{{cssinfo}}</p>
<h2 id="Formal_syntax">Formal syntax</h2>
{{csssyntax}}
<h2 id="示例">示例</h2>
<h3 id="Setting_ordinal_numeric_forms">Setting ordinal numeric forms</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">/*
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>
<h4 id="Result">Result</h4>
<p>{{EmbedLiveSample('Setting_ordinal_numeric_forms')}}</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-numeric', 'font-variant-numeric')}}</td>
<td>{{Spec2('CSS3 Fonts')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("css.properties.font-variant-numeric")}}</p>
|
