Is there a way to specify the use of text or titling figures in CSS?_问答_开发者

Is there a way to specify the use of text or titling figures in CSS?

开发者 https://www.devze.com 2023-01-01 08:25 出处：网络

开发者_开发技巧My fonts of choice usually default to text figures which is one reason I like them. However, for tables or headings I\'d like to specify that lining figures should be used:

相关专题：css

开发者_开发技巧

My fonts of choice usually default to text figures

Is there a way to specify the use of text or titling figures in CSS?

which is one reason I like them. However, for tables or headings I'd like to specify that lining figures should be used:

Is there a way to specify the use of text or titling figures in CSS?

Is there a way to do so in CSS?

(To appease the search:

old-style numerals, text figures, non-lining figures, medieval numerals
lining numerals, titling figures)

Firefox 4.0 has basic text figure support. Here's how to turn on text (old-style) figures:

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

Looks like there's a set of css3 properties, such as font-variant-numeric, to control common properties. These are not yet supported by any browser, as far as I know.

Here's a jsFiddle where you can play around with the styles. It toggles between lining and old-style figures. I'm using Minion Pro on Windows 7, so you might have to find your own supported font on other platforms.

No, there's no such property in the CSS 2.1 specification. It's up to the web browser to chose a font available in the system and render it with whatever the ‘default’ style is.

A quick look in the CSS 3 Working Draft also doesn't reveal an option like this.

And although you can use the @font-face property in newer browsers, there doesn't seem to be an option to select OpenType features in general (like using lining or oldstyle figures).

A quick search revealed there has been a discussion about this on the W3 CSS mailing list.

Update: Inspired by Creating Custom Font Stacks with Unicode-Range I decided to give unicode-range property a try. Alas, you cannot change the lookup-table to use custom figures when normal figures 0-9 are used.

But, though it's not convenient to enter digits in high Unicode ranges (e.g. use the Unicode code converter), it is possible to use a specific set of figure, e.g. lining numerals for tables (and the ﬁ-ligature as well):

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

OpenType features are now supported in many browsers:

font-feature-settings: 'lnum'

Old-style is also supported via 'onum'. You can omit the '=1' for boolean flags.

See Mozilla's description for more details, or this more thorough writeup of the various font features.

Try this..

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