代码之家 › 专栏 › 技术社区 › Joey

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

css

Joey · 技术社区 · 14 年前

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

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

这就是我喜欢它们的原因之一。但是,对于表格或标题,我想指定应使用衬线数字:

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

有没有一种在CSS中这样做的方法?

(为了安抚搜索:

旧式数字、文字数字、无衬线数字、中世纪数字
衬线数字、标题数字)

4 回复 | 直到 9 年前

theazureshadow 13 年前

火狐4.0有基本功能 text figure support . 以下是如何打开文本(旧样式)图形:

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

似乎有一组CSS3属性,例如 font-variant-numeric ,以控制公共属性。据我所知,这些还没有被任何浏览器支持。

这里有一个 jsFiddle 在那里你可以玩弄各种风格。它在线条和旧样式图形之间切换。我在Windows7上使用Minion Pro,所以您可能需要在其他平台上找到自己支持的字体。

Marcel Korpel 13 年前

不,里面没有这样的财产 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 属性A尝试。唉,当正常数字时,不能将查阅表格更改为使用自定义数字。 0-9 被使用。

但是,尽管在高Unicode范围内输入数字并不方便(例如,使用 Unicode code converter ) 是可以使用一组特定的数字,例如表格的衬线数字(以及“连字”):

<!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>

Alex Feinman 11 年前

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

font-feature-settings: 'lnum'

旧样式也支持通过 'onum' . 布尔标志可以省略“=1”。

见 Mozilla's description 有关详细信息,或 this more thorough writeup 各种字体功能。

buTs 9 年前

试试这个…

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;
    }