diff options
Diffstat (limited to 'files/zh-cn/web/css/font-variant-numeric/index.html')
| -rw-r--r-- | files/zh-cn/web/css/font-variant-numeric/index.html | 138 |
1 files changed, 138 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/font-variant-numeric/index.html b/files/zh-cn/web/css/font-variant-numeric/index.html new file mode 100644 index 0000000000..16b4e1640c --- /dev/null +++ b/files/zh-cn/web/css/font-variant-numeric/index.html @@ -0,0 +1,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> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<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> |