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

Question

我想知道是否有一种方法可以使用 HTML/CSS 设置字体以使用数字的“大写”版本而不是“小写”版本。由于内容将由客户端管理，我不能保证所有数字都用跨度包装，所以如果有一种方法可以动态发生，那就太棒了。

我使用的字体是“Tisa Sans Pro”，其中默认数字有升序和降序(我相信这是正确的术语？)，但大写版本使用的数字保持排列。客户更喜欢排队的版本。

谢谢!

Answer 1

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

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

请注意，即使使用的字体有例如衬里数字可选，当使用诸如网络字体(可下载字体)之类的字体时，此代码可能仍然无效。原因是当生成不同的字体格式(.eot、.woff 等)时，字体生成器可能会忽略或扭曲字体变体选择所需的信息。字体生成器可能有请求包含此类信息的选项，或者它可能有修复一些可选变体的选项，例如选择衬里数字，以便字体仅包含此类数字(并且选择不需要 CSS 代码)。