C'è un modo per specificare l'uso del testo o delle figure di titolazione nei CSS?

I miei caratteri di scelta solitamente usano la testo figureC'è un modo per specificare l'uso del testo o delle figure di titolazione nei CSS?

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

che è una ragione mi piacciono. Tuttavia, per le tabelle o intestazioni vorrei precisare che le cifre di rivestimento dovrebbero essere usati:

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

C'è un modo per farlo in CSS?

(Per placare la ricerca:

numeri in stile antico, figure di testo, figure non-lining, numeri medievali
numeri di rivestimento, figure titolazione)

fonte

2010-05-30 Joey

esempio sarebbe bello – Jason

avrei pensato che questo è specifico per il tipo di carattere. Non sono a conoscenza di qualcosa di simile in CSS. – Tom

@ Jason: avrei pensato che fosse una conoscenza comune, mi dispiace. Modificato. – Joey

Firefox 4.0 ha base text figure support. Ecco come attivare il testo figure (vecchio stile):

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

Sembra che ci sia un insieme di proprietà CSS3, come ad esempio font-variant-numeric, per controllare le proprietà comuni. Questi non sono ancora supportati da nessun browser, per quanto ne so.

Ecco uno jsFiddle in cui è possibile giocare con gli stili. Passa dalla fodera alle figure vecchio stile. Sto usando Minion Pro su Windows 7, quindi potresti dover trovare il tuo font supportato su altre piattaforme.

fonte

2011-06-18 02:20:16 theazureshadow

Ancora una soluzione proprietaria * sigh *. Mi piacerebbe che i CSS riceverebbero un tale supporto, alla fine. – Joey

Beh, è lì, in forma di bozza. Dobbiamo solo aspettare fino a quando i browser lo supportano. Mi aspetto che Firefox potrebbe essere abbastanza veloce su quello, dal momento che hanno già il supporto - è solo un cambio di interfaccia. – theazureshadow

@Joey: IE10 supporta diverse funzioni di apertura utilizzando '-ms-font-feature-settings': http://ie.microsoft.com/testdrive/Graphics/OpenType/ Vedere anche http://caniuse.com/font-feature –

No, non c'è tali proprietà nel CSS 2.1 specification. Spetta al browser Web scegliere un font disponibile nel sistema e renderlo con lo stile 'predefinito'.

Un rapido sguardo nello CSS 3 Working Draft inoltre non rivela un'opzione come questa.

E anche se è possibile utilizzare la proprietà @font-face in newer browsers, non sembra essere un'opzione per selezionare le funzioni OpenType in generale (come l'utilizzo di lining or oldstyle figures).

Una ricerca rapida ha rivelato che c'è stata una discussione al riguardo su W3 CSS mailing list.

Aggiornamento: Ispirato Creating Custom Font Stacks with Unicode-Range ho deciso di dare unicode-range proprietà una prova. Purtroppo, non è possibile modificare la tabella di ricerca per utilizzare figure personalizzate quando vengono utilizzati i valori normali 0-9.

Ma, anche se non è conveniente inserire le cifre in alte gamme Unicode (ad esempio utilizzare il Unicode code converter), esso è possibile utilizzare un insieme specifico di figura, ad esempio allineando le cifre per le tabelle (e la legatura fi pure):

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

fonte

2010-05-30 22:52:11

Hm, temevo tanto. È interessante notare che i CSS consentono in alcuni casi un controllo abbastanza preciso sulla composizione tipografica e trascurano quasi completamente la tipografia. – Joey

@Johannes È possibile, ovviamente, utilizzare tale granularità per fare ciò che si desidera. Usando @ font-face, puoi definire lo stile alternativo come "Font Name Lining" o assegnarlo come se fosse un font completamente diverso. –

@D_N: d'accordo, sebbene @ font-face sia [non quello ampiamente supportato] (http://webfonts.info/wiki/index.php?title=%40font-face_browser_support), ancora. –

funzioni OpenType sono ora supportati in molti browser:

font-feature-settings: 'lnum'

Vecchio stile è supportato anche tramite 'onum'. Puoi omettere il '= 1' per i flag booleani.

Vedere Mozilla's description per ulteriori dettagli o this more thorough writeup delle varie caratteristiche dei caratteri.

fonte

2013-08-19 18:33:55

+1 Ecco un elenco di valori possibili: https://css-tricks.com/almanac/properties/f/font-feature-settings/#article-header-id-0 Ovviamente, il carattere hai scelto di avere quei caratteri specifici –

Prova questo ..

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

fonte

2015-04-22 11:28:34 buTs

Com'è diverso dalla risposta di theazureshadow di quattro anni fa, o la risposta di Alex di 2 anni fa? – Joey

C'è un modo per specificare l'uso del testo o delle figure di titolazione nei CSS?

risposta

Problemi correlati