font-feature-settings: Qual è la sintassi corretta?

Question

Ho acquistato un webfont che supporta alcune funzionalità di tipo aperto e, naturalmente, voglio usarle.
Purtroppo, non sono stato in grado di trovare una fonte online che spieghi il modo migliore di utilizzare la sintassi - mi sembra che lo font-feature-settings sia un altro esempio di inferno di prefisso.

Al momento l'ho scritto in questo modo ma non sono sicuro che copra davvero tutti i browser che supportano tali funzionalità.

.element { 
    -webkit-font-feature-settings: "kern" 1, "liga" 1, "case" 1; 
     -moz-font-feature-settings: "kern=1", "liga=1", "case=1"; 
     -moz-font-feature-settings: "kern" on, "liga" on, "case" on; 
     -ms-font-feature-settings: "kern" 1, "liga" 1, "case"; 
     -o-font-feature-settings: "kern", "liga", "case"; 
      font-feature-settings: "kern", "liga", "case"; 
} 

Più in particolare, la sintassi -moz sembra strano. Alcune fonti sostengono che questo è la sintassi da utilizzare:

-moz-font-feature-settings: "liga=1"; /* Firefox 14 and before */ 
-moz-font-feature-settings: "liga" on; /* Firefox 15 */ 

Altri lo fanno semplicemente in questo modo:

-moz-font-feature-settings: "cswh=1"; 
-moz-font-feature-settings: "cswh"; 

Lo stesso vale per -webkit; Alcuni scrivono in quel modo:

-webkit-font-feature-settings: "liga" on, "dlig" on; 

Mentre gli altri lo fanno in questo modo:

-webkit-font-feature-settings: "liga", "dlig"; 

O come questa:

-webkit-font-feature-settings: "liga" 1, "dlig" 1; 

E in cima, c'è anche text-rendering: optimizelegibility; che sembra essere lo stesso di "kern" e "liga", almeno nei browser Webkit.

Quindi, qual è il modo corretto e antiproiettile per utilizzare le funzionalità di carattere Open Type sul Web nel 2013?

Answer 1

Beh, il posto migliore per cercare il modo 2013 web dispone dovrebbe lavoro sarebbe il W3 CSS3 Specification:

Se presente, indica un valore di un indice utilizzato per la selezione dei glifi. Un valore deve essere 0 o superiore. Il valore 0 indica che la funzione è disabilitata. Per le caratteristiche booleane, il valore 1 abilita la funzione.Per le funzionalità non booleane, il valore 1 o maggiore abilita la funzione e indica l'indice di selezione delle caratteristiche. Un valore di 'on' è sinonimo di 1 e 'off' è sinonimo di 0. Se il valore è omesso, viene assunto un valore pari a 1.

Ciò significa che "liga" 1, "liga" on e liga tutti fanno la stessa cosa.

Come BoltClock ha menzionato nel suo commento sulla domanda, "feature=value" non è una sintassi valida e sembra essere qualcosa di specifico per Firefox.

Opera e IE (< 10) do not support font-feature-settings at all, così le -o-* e -ms-* attributi sono presumibilmente inutili.

Nel complesso, una sintassi di lavoro per tutti i browser attualmente supportati sembrerebbe essere:

.element { 
    -webkit-font-feature-settings: "kern", "liga", "case"; /* No variation */ 
     -moz-font-feature-settings: "kern=1", "liga=1", "case=1"; /* Firefox 4.0 to 14.0 */ 
     -moz-font-feature-settings: "kern", "liga" , "case"; /* Firefox 15.0 onwards */ 
     -moz-font-feature-settings: "kern" 1, "liga" 1, "case" 1; /* Firefox 15.0 onwards explicitly set feature values */ 
      font-feature-settings: "kern", "liga", "case"; /* No variation */ 
} 

Answer 2

http://hacks.mozilla.org/2010/11/firefox-4-font-feature-support/ sarebbe probabilmente un buon punto di partenza, così come lo specification itself.

Va anche notato che non si otterrà un modo completamente antiproiettile di utilizzare le caratteristiche dei caratteri nel senso che funzionerebbe su tutto il browser. Secondo caniuse, le caratteristiche dei caratteri hanno una sorta di supporto approssimativo (niente in Opera, niente prima di IE10, niente nella maggior parte dei browser mobili, parziale e prefissato in quello che rimane), in parte dovuto al fatto che è ancora in "Working Draft" status, che significa che c'è ancora una possibilità che cambierà. Pertanto, sarebbe una buona idea non dipendere ancora da questa funzionalità e aspettarsi che non funzioni su tutti i browser.

In un'altra nota, poiché hai menzionato "prefisso inferno" (che in realtà non è poi così male - i prefissi devono essere eliminati nel tempo, lo sapevi che non hai più bisogno di prefissi per border-radius a meno che non sei bloccato supporto di browser veramente antichi?) - potresti voler esaminare uno dei preprocessori CSS, come LESS o Sass. Questi strumenti ti possono aiutare con il CSS all'avanguardia inserendo i prefissi e la sintassi corretta per te, mentre mantieni la tua fonte pulita con le dichiarazioni che seguono gli standard del W3C.