font-variant-numeric

Avatar of Geoff Graham
Geoff Graham on

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 $200 免费信用额度!

CSS 中的 font-variant-numeric 属性支持 OpenType 字体格式,通过指定在类上使用哪些数字字形,包括分数、序数标记和样式变化等变体。

一点背景

我们倾向于将数字视为静态字形。它打印出来,就是这样。但是,数字更像字母,因为它们可以有变体,根据上下文,这些变体使得修改样式变得很有价值。我们正在谈论分数(例如 1/4)、序数(例如 1st)甚至数字的上下大小写。但是,与字母不同,这些变化不会改变内容的含义,尽管它们确实提供了额外的上下文或对可读性有影响。

这个属性的问题在于它被设计为与 支持 OpenType 的字体 一起使用,这是一种新兴但发展迅速的字体格式,它提供了一组更广泛的字形,这些字形可以在不同的上下文中使用。您可能经常听到 OpenType 被称为可变字体,这是因为它们包含更多种类的字符,使其在各种用途上更加灵活。各种各样的变化!

问题在于,能够充分利用 font-variantfont-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

其他资源