Question

我选择的字体通常默认为文字数字

Text figures http://hypftier.de/dump/numerals-text.png

这是我喜欢它们的一个原因。但是，对于表格或标题，我想指定应使用衬里数字：

Titling figures http://hypftier.de/dump/numerals-titling.png

有没有办法在CSS中这样做？

（安抚搜索：

旧式数字，文字数字，非衬里数字，中世纪数字
衬里数字，标题数字）

Answer 1

Firefox 4.0具有基本text figure support。以下是打开文字（旧式）数字的方法：

.text-figures {
  -moz-font-feature-settings: "onum=1";
}

看起来有一组css3属性，例如font-variant-numeric，用于控制常用属性。据我所知，任何浏览器都不支持这些。

这是一个jsFiddle，你可以在这里玩弄风格。它在衬里和旧式人物之间切换。我在Windows 7上使用Minion Pro，因此您可能必须在其他平台上找到自己支持的字体。

Answer 2

不，CSS 2.1 specification中没有这样的属性。由Web浏览器选择系统中可用的字体并使用“默认”样式进行渲染。

快速查看CSS 3 Working Draft也不会显示这样的选项。

虽然您可以使用@font-face中的newer browsers属性，但似乎没有选择OpenType功能（例如使用lining or oldstyle figures）。

快速搜索显示W3 CSS mailing list已就此进行了讨论。

更新：受Creating Custom Font Stacks with Unicode-Range的启发我决定尝试unicode-range财产。唉，当使用正常数字0-9时，您无法更改查找表以使用自定义数字。

但是，虽然在高Unicode范围内输入数字并不方便（例如使用Unicode code converter），但可能使用一组特定的数字，例如桌子的衬里数字（以及f-ligature）：

<!DOCTYPE html>
<html>
 <head>
  <meta charset=utf-8>
  <title>Table numerals</title>
  <style>
   @font-face {
     font-family: Calluna;
     src: url(http://localhost/Calluna-Regular.otf);
   }
   body { font-family: Calluna }
   #f { font-size: 32pt }
  </style>
 </head>
 <body>
  <p id="f">Table ﬁgures: </p>
 </body>
</html>

Answer 3

现在许多浏览器都支持OpenType功能：

font-feature-settings: 'lnum'

'onum'也支持旧式。你可以省略布尔标志的'= 1'。

有关详细信息，请参阅Mozilla's description，或查看各种字体功能的this more thorough writeup。

Answer 4

试试这个..

body {
        -moz-font-feature-settings:"lnum" 1;
        -moz-font-feature-settings:"lnum=1";
        -ms-font-feature-settings:"lnum" 1;
        -o-font-feature-settings:"lnum" 1;
        -webkit-font-feature-settings:"lnum" 1;
        font-feature-settings:"lnum" 1;
        font-variant-numeric: lining-nums;
    }

有没有办法在CSS中指定文本的使用或标题数字？

4 个答案: