控制替代字型的数字 | font-variant-numeric
font-variant-numericCSS属性控制替代字形的数字，级分，和序标记物的使用。
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;Initial value | normal |
|---|---|
应用对象 | all elements. It also applies to ::first-letter and ::first-line. |
是否可继承 | yes |
媒体 | visual |
计算值 | as specified |
动画类型 | discrete |
规范顺序 | order of appearance in the formal grammar of the values |
语法
此属性可以采取以下两种形式之一：
- 关键字值
normal
- 或按任何顺序列出的一个或多个其他值，空格分隔。
取值
normal这个关键字导致使用这些替代符号的失活。
ordinal这个关键字强制使用特殊的符号作为序号标记，比如英语中的第一、第二、第三、第四或意大利语中的1a。它对应于OpenType值ordn...slashed-zero此关键字强制使用带有斜杠的0；这在需要明确区分O和0时非常有用。它对应于OpenType值zero.
<numeric-figure-values>这些值控制用于数字的数字。有两个值是可能的：
lining-nums激活数字都在基线上的一组数字。它对应于OpenType值lnum。
oldstyle-nums激活一组数字，其中一些数字，如3,4,7,9有下降。它对应于OpenType值onum。
<numeric-spacing-values >这些值控制用于数字的数字的大小。两个值是可能的：
proportional-nums激活数字不是全部相同大小的一组数字。它对应于OpenType值pnum。
tabular-nums激活一组数字，其中的数字都是相同的大小，使他们可以像表中一样轻松对齐。它对应于OpenType值tnum。
<numeric-fraction-values >这些值控制用于显示分数的字形。两个值是可能的：
diagonal-fractions激活分子和分母变得更小并用斜线分隔的一组数字。它对应于OpenType值frac。
stacked-fractions激活一组数字，其中分子和分母被缩小，堆叠并用一条水平线分开。它对应于OpenType值afrc...
形式语法
normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]where
<numeric-figure-values> = [ lining-nums | oldstyle-nums ]
<numeric-spacing-values> = [ proportional-nums | tabular-nums ]
<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ]实例
HTML
<p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p>CSS
.ordinal {
font-variant-numeric: ordinal;
font-family: consolas, "Liberation Mono", courier, monospace;
}结果
规范
Specification | Status | Comment |
|---|---|---|
CSS Fonts Module Level 3The definition of 'font-variant-numeric' in that specification. | Candidate Recommendation | Initial definition |
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
Basic support | 52.0 | 34 (34) 1 | ? | 39 | (Yes) |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|
Basic support | No support | 52.0 | 34.0 (34)1 | ? | 39 | ? | 52.0 |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
