@ font-face, varianti font

Question

Questa è la mia dichiarazione @ font-face per supportare diverse varianti di font, in questo caso la versione grassetto e più audace del mio font.

@font-face { 
    font-family: "santana"; 
    src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: "santana"; 
    src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype'); 
    font-weight: bold; 
} 
@font-face { 
    font-family: "santana"; 
    src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype'); 
    font-weight: bolder; 
} 

In questo momento sto solo lavorando con Chrome e Firefox. In Chrome funzionano le varianti normale e grassetto, ma non la variante più audace (mantiene quella 'grassetto'). In Firefox solo la variante in grassetto funziona come previsto, in tutti gli altri casi viene utilizzata la variante più audace (anche per il peso normale).
Si tratta di un problema noto o esiste un modo migliore per eseguire questa dichiarazione?

Answer 1

Ci sono 2 questioni separate qui:

1. L'uso di parole chiave font-peso, piuttosto che i valori numerici.
2. Supporto per IE8 (e versioni precedenti), se necessario.

Parole

Il problema con l'utilizzo di parole chiave font-weight sembra essere che lighter e bolder non sono valori assoluti come (rispettivamente sempre 400 e 700,) normal e bold, ma sono relative al l'audacia stabilita dell'elemento genitore (100 più chiaro o più scuro). Potrebbe non essere possibile trattare lighter e bolder come se fossero valori assoluti.

Come suggerito da @HTMLDeveloper e @Christoph, l'utilizzo di valori numerici anziché di parole chiave è la soluzione più semplice a questo e può essere di per sé una soluzione adeguata (se non è necessario il supporto per IE8).

@font-face { 
    font-family: "santana"; 
    src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype'); 
    font-weight: 400; 
    font-style: normal; 
} 
@font-face { 
    font-family: "santana"; 
    src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype'); 
    font-weight: 700; 
} 
@font-face { 
    font-family: "santana"; 
    src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype'); 
    font-weight: 900; /* or whatever weight you need to use for "bolder" */ 
} 

IE8 e precedenti

Alcuni browser hanno problemi di visualizzazione quando pesi multipli o stili sono associate con lo stesso nome font-family.

problemi

speciali Io sono a conoscenza di:   (ci possono essere altri)

• Quando più di 1 peso è legata a un nome font-family, IE8 ha problemi di visualizzazione.
• Quando più di 4 pesi o stili sono collegati a un nome di famiglia di font, IE6/7/8 presenta problemi di visualizzazione.

La soluzione è quella di utilizzare un unico font-family nome per ogni variazione di carattere:

@font-face { 
    font-family: "santana"; 
    src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype'); 
} 
@font-face { 
    font-family: "santana-bold"; 
    src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype'); 
} 
@font-face { 
    font-family: "santana-bolder"; 
    src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype'); 
} 

Questo approccio è comunemente usato dai servizi di carattere come Typekit. Se è necessario il supporto per un'ampia varietà di browser (o almeno, IE8 in particolare), questo potrebbe essere considerato uno dei prezzi da pagare quando si incorporano i font.

Answer 2

In carattere font singolo, le virgolette per il nome della famiglia di font non sono necessarie. dovresti rimuovere ed eseguirlo funzionerà correttamente. font-family: santana; font-weight: 900; non è necessario per font singolo, ha bisogno solo di più font. invece di usare il valore numerico più audace dovrebbe funzionare bene.