DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 $200 免费信用额度!
CSS 中的 font-variant-numeric
属性支持 OpenType 字体格式,通过指定在类上使用哪些数字字形,包括分数、序数标记和样式变化等变体。
一点背景
我们倾向于将数字视为静态字形。它打印出来,就是这样。但是,数字更像字母,因为它们可以有变体,根据上下文,这些变体使得修改样式变得很有价值。我们正在谈论分数(例如 1/4)、序数(例如 1st)甚至数字的上下大小写。但是,与字母不同,这些变化不会改变内容的含义,尽管它们确实提供了额外的上下文或对可读性有影响。
这个属性的问题在于它被设计为与 支持 OpenType 的字体 一起使用,这是一种新兴但发展迅速的字体格式,它提供了一组更广泛的字形,这些字形可以在不同的上下文中使用。您可能经常听到 OpenType 被称为可变字体,这是因为它们包含更多种类的字符,使其在各种用途上更加灵活。各种各样的变化!
问题在于,能够充分利用 font-variant
和 font-variant-numeric
的字体的可用性有限。越来越多的字体与 OpenType 兼容,但能够利用 font-variant-numeric
提供的所有功能的选项却少得多,而且这些选项通常是高级且昂贵的。Richard Butler 很好地总结了这一点
我们可以使用称为衬线或标题数字的“大写”数字,以及称为旧式或文本数字的“小写”数字。……事实也是,如果现代意味着支持 OpenType,专业意味着使用两套数字,那么绝大多数字体既不现代也不专业。
当涉及 CSS 属性时,我们通常最关心的是浏览器支持,但此属性以及与 font-variant
相关的其他属性也取决于字体设计师来提供完全支持。
这很可惜,但我们开始看到更多“现代”和“专业”的字体出现,即使是在撰写本文时也是如此。Adobe TypeKit 宣布 它支持 OpenType 功能,并且有传言说 Google Fonts 也加入了,现在 Chrome 62 支持它们。
基本用法
这是该属性的最基本用法
.fraction {
font-variant-numeric: diagonal-fractions;
}
旧浏览器无法识别这一点,但它们接受 font-feature-settings
,它使用不同的值解锁相同的功能。我们可以将这两个属性配对以获得更深层次的支持
.fraction {
font-feature-settings: frac;
font-variant-numeric: diagonal-fractions;
}
或者,我们可以利用 @supports
来定制此属性,以便仅将新属性提供给支持的浏览器
.fraction {
font-feature-settings: frac;
}
@supports (font-variant-numeric: diagonal-fractions) {
.fraction {
font-feature-settings: frac;
font-variant-numeric: diagonal-fractions;
}
}
值
font-variant-numeric
属性接受以下值。为了参考,还记录了相应的 font-feature-settings
值。
一般值

值 | 描述 | 功能设置 |
---|---|---|
normal |
下面列出的功能均未启用。 | N/A |
ordinal |
使用字母表示数字顺序,通常以上标形式。 | ordn |
slashed-zero |
显示零的替代形式,其中有一条斜线穿过它。 | zero |
数字字形值

值 | 描述 | 功能设置 |
---|---|---|
lining-nums |
将数字垂直排列,使其保持相同的高度并对齐在同一平面上。 | lnum |
oldstyle-nums |
允许另一种垂直对齐方式,其中数字并不总是均匀地显示在同一基线上。 | onum |
数字分数值

值 | 描述 | 功能设置 |
---|---|---|
diagonal-fractions |
以更小的格式显示分数,其中分子(顶部数字)和分母(底部数字)用斜线隔开。 | frac |
stacked-fractions |
以更小的格式显示分数,其中分子和分母上下叠放,用水平线隔开。 | afrc |
数字间距值
值 | 描述 | 功能设置 |
---|---|---|
proportional-nums |
允许数字占用自己的空间,这些空间的宽度不一定与其他数字相等。 | pnum |
tabular-nums |
以相等的尺寸显示数字,在表格数据上下文中进行比例和间距以获得整洁的格式。 | tnum |
规范中包含一条关于使用 ordinal
的特殊说明,因为它类似于上标 sup
元素,但标记方式不同。
对于上标
sup {
font-variant-position: super;
}
Two squared is 2<sup>2</sup>
对于序数标记
.ordinal {
font-variant-numeric: ordinal;
}
1st
浏览器支持
font-variant-numeric
属性目前是 CSS 字体模块级别 3 规范的一部分,该规范在撰写本文时处于候选推荐状态,这意味着它随时可能发生变化。
桌面
Chrome | Edge | Firefox | IE | Opera | Safari |
---|---|---|---|---|---|
52 | 否 | 34 | 否 | 39 | 9.1 |
Firefox 24-34(不含)在 layout.css.font-features.enabled
首选项设置为 true
时,支持该属性。
移动
Android 浏览器 | Chrome Android | Edge | Firefox | IE | Opera Android | iOS Safari |
---|---|---|---|---|---|---|
52 | 52 | 否 | 34 | 否 | 39 | 是 |
其他资源
- CSS 字体模块级别 3:定义该属性的官方规范。
- MDN 文档: 关于该属性的 Mozilla 文档,包含示例。
- 网络排版:数字: 一篇关于该主题的综合性A List Apart文章。
- 关注 OpenType 功能: 另一篇在 TypeKit Practice 上的深入探讨。
- 当前使用情况: Microsoft Edge 衡量使用该属性的现有网站的数量。
- Microsoft Edge 功能请求: 投票鼓励 Edge 采用该功能。