在HTML/CSS中设置数字样式的首选项(大写与小写数字)

Question

我想知道是否有一种方法可以使用HTML/CSS来设置字体以使用"大写"版本的数字而不是"小写"版本.由于内容将由客户端管理,我不能保证包含所有数字的跨度,所以如果有一种方法可以动态发生,那将是非常棒的.

我使用的字体是"Tisa Sans Pro",其中默认数字有ascenders和descenders(我相信这是正确的术语？),但是大写版本使用保持排列的数字.客户更喜欢排队版本.

谢谢!

Answer 1

数字(数字)的大写和小写变体在CSS中被称为"衬里数字"和"旧式数字"(以及排版中的各种其他名称).它们之间的选择可以使用进行font-feature-settings属性,如果一个)被使用的字体包含所需的变体(最常用的字体没有)和b)的浏览器支持此属性.浏览器支持在现代浏览器中相对较好,但您仍然需要一些供应商前缀版本.例:

body {
   -moz-font-feature-settings: "lnum";
   -webkit-font-feature-settings: "lnum";
   font-feature-settings: "lnum";
}

请注意,即使使用的字体具有例如可选择的衬里数字,当使用这种字体作为网络字体(可下载字体)时,此代码可能仍然不起作用.原因是当生成不同的字体格式(.eot,.woff等)时,字体生成器可以省略或扭曲字体变体选择所需的信息.字体生成器可以具有用于请求包括这样的信息的选项,或者它可以具有用于修复某些可选变体的选项,例如选择衬里数字以使得字体仅包含这样的数字(并且选择不需要CSS代码).