试一试
font-variant-numeric: normal;
font-variant-numeric: ordinal;
font-variant-numeric: slashed-zero;
font-variant-numeric: tabular-nums;
font-variant-numeric: oldstyle-nums;
font-variant-numeric: lining-nums;
font-variant-numeric: proportional-nums;
font-variant-numeric: diagonal-fractions;
<section id="default-example">
<div id="example-element">
<table>
<tr>
<td><span class="tabular">0</span></td>
</tr>
<tr>
<td><span class="tabular">3.54</span></td>
</tr>
<tr>
<td><span class="tabular">1.71</span></td>
</tr>
<tr>
<td><span class="tabular">1st</span></td>
</tr>
<tr>
<td><span class="tabular">3/4</span></td>
</tr>
</table>
</div>
</section>
@font-face {
font-family: "Source Sans Pro";
src:
local("SourceSansPro-Regular"),
url("/shared-assets/fonts/SourceSansPro-Regular.otf") format("opentype");
font-weight: normal;
font-style: normal;
}
section {
font-family: "Source Sans Pro", sans-serif;
margin-top: 10px;
font-size: 1.5em;
}
#example-element table {
margin-left: auto;
margin-right: auto;
}
.tabular {
border: 1px solid;
}
语法
css
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: revert;
font-variant-numeric: revert-layer;
font-variant-numeric: unset;
此属性可以采用以下两种形式之一：
- 关键字值
normal - 或以下列出的一个或多个其他值，用空格分隔，顺序不限。
值
normal-
此关键字导致停用此类替代字形的使用。
ordinal-
此关键字强制使用序数标记的特殊字形，例如英语中的 1st、2nd、3rd、4th 或意大利语中的 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 |
|---|---|
| 应用于 | 所有元素和文本。它也适用于 ::first-letter 和 ::first-line。 |
| 继承性 | 是 |
| 计算值 | 同指定值 |
| 动画类型 | 离散 |
正式语法
font-variant-numeric =
normal |
[ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]
<numeric-figure-values> =
lining-nums |
oldstyle-nums
<numeric-spacing-values> =
proportional-nums |
tabular-nums
<numeric-fraction-values> =
diagonal-fractions |
stacked-fractions
示例
设置序数数字形式
点击下面代码块中的“Play”按钮，在 MDN Playground 中编辑示例。
html
<p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p>
css
@font-face {
font-family: "Source Sans Pro";
src: url("https://mdn.github.io/shared-assets/fonts/SourceSansPro-Regular.otf")
format("opentype");
font-weight: normal;
font-style: normal;
}
.ordinal {
font-family: "Source Sans Pro", sans-serif;
font-size: 2rem;
font-variant-numeric: ordinal;
}
规范
| 规范 |
|---|
| CSS 字体模块第 4 级 # font-variant-numeric-prop |
浏览器兼容性
加载中…