font-variant-numeric
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
font-variant-numeric CSS 属性控制数字、分数和序号标记的替代字形的使用。
尝试一下
font-variant-numeric: normal;
font-variant-numeric: slashed-zero;
font-variant-numeric: tabular-nums;
font-variant-numeric: oldstyle-nums;
<section id="default-example">
<div id="example-element">
<table>
<tr>
<td><span class="tabular">0</span></td>
</tr>
<tr>
<td><span class="tabular">3.14</span></td>
</tr>
<tr>
<td><span class="tabular">2.71</span></td>
</tr>
</table>
</div>
</section>
@font-face {
font-family: "Fira Sans";
src:
local("FiraSans-Regular"),
url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
section {
font-family: "Fira Sans", 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: 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 |
|---|---|
| 适用元素 | 所有元素和文本. It also applies to ::first-letter and ::first-line. |
| 是否是继承属性 | 是 |
| 计算值 | as specified |
| 动画类型 | 离散值 |
形式语法
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
示例
设置序数形式
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: 400;
font-style: normal;
}
.ordinal {
font-family: "Source Sans Pro";
font-size: 2rem;
font-variant-numeric: ordinal;
}
规范
| Specification |
|---|
| CSS Fonts Module Level 4 # font-variant-numeric-prop |
浏览器兼容性
Loading…