2010-05-30 13 views
15

Meine Schriften Wahl Text StandardwertenGibt es eine Möglichkeit, die Verwendung von Text oder Titeln in CSS anzugeben? in der Regel

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

was ein Grund ist, ich mag sie. Doch für Tabellen oder Überschriften würde ich angeben möchten, dass Versalziffern verwendet werden soll:

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

Gibt es eine Möglichkeit, um in CSS zu tun?

(Um die Suche zu beschwichtigen:

  • im alten Stil Zahlen, Textfiguren, nicht Versalziffern, mittelalterliche Ziffern
  • Futter Ziffern, Betitelung Figuren)
+0

Beispiel wäre schön – Jason

+0

ich gedacht hätte dies auf die Schrift spezifisch ist. Mir ist nichts dergleichen in CSS bekannt. – Tom

+0

@Jason: Ich hätte das für Allgemeinwissen gehalten, sorry. Bearbeitet. – Joey

Antwort

5

Firefox 4.0 Grund text figure support hat. Hier ist, wie auf Text (im alten Stil) Zahlen drehen:

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

Sieht aus wie es eine Reihe von CSS3-Eigenschaften ist, wie font-variant-numeric, gemeinsame Eigenschaften zu steuern. Diese werden von mir, soweit ich weiß, noch nicht unterstützt.

Hier ist ein jsFiddle, wo Sie mit den Stilen spielen können. Es wechselt zwischen Futter und alten Figuren. Ich verwende Minion Pro unter Windows 7, so dass Sie möglicherweise Ihre eigene unterstützte Schriftart auf anderen Plattformen finden müssen.

+0

Noch eine proprietäre Lösung * seufz *. Ich wünschte, CSS würde irgendwann solche Unterstützung bekommen. – Joey

+0

Nun, es ist da, in Entwurfsform. Wir müssen nur warten, bis die Browser es unterstützen. Ich erwarte, dass Firefox ziemlich schnell ist, da sie bereits die Unterstützung haben - es ist nur eine Änderung der Benutzeroberfläche. – theazureshadow

+0

@Joey: IE10 unterstützt mehrere opentype-Funktionen mit '-ms-font-feature-settings': http://ie.microsoft.com/testdrive/Graphics/OpenType/ Siehe auch http://caniuse.com/font-feature –

2

Nein, es gibt keine solche Eigenschaft in der CSS 2.1 specification. Es ist Aufgabe des Webbrowsers, eine im System verfügbare Schriftart auszuwählen und sie mit dem Standardstil zu rendern.

Ein kurzer Blick in die CSS 3 Working Draft zeigt auch keine Option wie folgt.

Und obwohl Sie die @font-face -Eigenschaft in newer browsers verwenden können, scheint es keine Option zur Auswahl von OpenType-Funktionen im Allgemeinen (wie mit lining or oldstyle figures).

Eine schnelle Suche ergab, dass es auf der W3 CSS mailing list eine Diskussion darüber gegeben hat.


Update: Inspiriert von Creating Custom Font Stacks with Unicode-Range ich unicode-range Eigenschaft einen Versuch geben beschlossen. Leider können Sie die Nachschlagetabelle nicht ändern, um benutzerdefinierte Zahlen zu verwenden, wenn normale Zahlen 0-9 verwendet werden.

Aber, obwohl es nicht bequem ist Ziffern in hohen Unicode Bereichen eingeben (zum Beispiel die Unicode code converter verwenden), es ist möglich, einen bestimmten Satz von Abbildung zu verwenden, z.B. Futter (auch und die finan- Ligatur) Zahlen für Tabellen:

<!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 figures: </p> 
</body> 
</html> 
+2

Hm, ich fürchtete mich so sehr. Es ist interessant, dass CSS in einigen Fällen eine ziemlich feinkörnige Kontrolle über den Satz erlaubt und die Typografie fast völlig vernachlässigt. – Joey

+0

@Johannes Sie können diese Granularität natürlich verwenden, um das zu tun, was Sie wollen. Mit @ font-face können Sie den alternativen Stil als "Font Name Lining" definieren oder ihn wie eine komplett andere Schriftart zuweisen. –

+0

@D_N: einverstanden, obwohl @ font-face [http://webfonts.info/wiki/index.php?title=%40font-face_browser_support] noch nicht unterstützt wird. –

1

Opentype-Funktionen sind jetzt in vielen Browsern unterstützt:

font-feature-settings: 'lnum' 

alten Stil wird auch über 'onum' unterstützt. Sie können das '= 1' für boolesche Flags weglassen.

Weitere Details finden Sie unter Mozilla's description oder this more thorough writeup der verschiedenen Schriftarten.

+0

+1 Hier ist eine Liste der möglichen Werte: https://css-tricks.com/almanac/properties/f/font-feature-settings/#article-header-id-0 Natürlich, die Schriftart Du musst diese spezifischen Charaktere haben –

1

die Sie interessieren ..

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

Wie unterscheidet sich das von theazureshadows Antwort vor vier Jahren oder Alex 'Antwort vor 2 Jahren? – Joey

Verwandte Themen