Caratteri Web e caratteri di fallback

Question

Quando si utilizza web fonts utilizzando @font-face Mi chiedevo quale sia il metodo consigliato per l'utilizzo dei caratteri di fallback?

Come, ad esempio se stavo usando un font web che era audace, come ad esempio:

@font-face { 
    font-family: 'OpenSansBold'; 
    src: url('../fonts/OpenSans-Bold-webfont.eot'); 
    src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/OpenSans-Bold-webfont.woff') format('woff'), 
     url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'), 
     url('../fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Ora, quando si chiama questo è, ovviamente, solo fare questo:

font-family: OpenSansBold; 

Tuttavia ero chiedendo di fornire font di fallback come se il download del font fallisse per qualsiasi motivo.

Ovviamente questo è abbastanza facile da fare con un tipo di carattere stile normale (non in grassetto/non-corsivo), come di seguito ..

font-family: OpenSansRegular, Arial; 

Tuttavia, quello che mi chiedo è che dire quando il tipo di carattere è in grassetto o corsivo.

Si consiglia di qualcosa di simile e non influenzerà il carattere web?

font-family: OpenSansBold, Arial; 
font-weight: bold; 

Basta chiedersi perché se non è stato specificato il grassetto quindi se il font web non è riuscita, si otterrebbe Arial, ma non sarebbe in grassetto.

Answer 1

Presumibilmente si utilizzano file di font e un file CSS come generato da FontSquirr EL. Il problema con il loro approccio è che ogni carattere specifico (come Open Sans Regular e Open Sans Bold) è rappresentato come una famiglia di font separata, con il peso del font impostato su normale.Ciò significa che al posto del markup come <p>foo <strong>bar</strong> e del semplice CSS come p { font-family: Open Sans, Arial } (lasciando i browser predefiniti con il peso strong e selezionando il font adatto dalla famiglia Open Sans), sarà necessario impostare i caratteri in modo esplicito. Ciò significa impostare sia la famiglia di font che il peso del font, implicitamente con il valore della proprietà font-family.

È necessario ottimizzare il CSS per ottenere un approccio migliore. Si potrebbe utilizzare la stessa famiglia di font, ma pesi differenti nella regola @font-family, e nella regola font-family, è necessario impostare solo la famiglia:

@font-face { 
    font-family: 'open_sans'; 
    src: url('opensans-bold-webfont.eot'); 
    src: url('opensans-bold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('opensans-bold-webfont.woff') format('woff'), 
     url('opensans-bold-webfont.ttf') format('truetype'), 
     url('opensans-bold-webfont.svg#OpenSans') format('svg'); 
    font-weight: bold; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'open_sans'; 
    src: url('opensans-regular-webfont.eot'); 
    src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('opensans-regular-webfont.woff') format('woff'), 
     url('opensans-regular-webfont.ttf') format('truetype'), 
     url('opensans-regular-webfont.svg#OpenSans') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
* { font-family: open_sans, Arial; } 

E poi si sarebbe solo usare font-weight: bold (o il codice HTML che ha un tale per impostazione predefinita, ad esempio strong, , th, h1 tramite h6, per quegli elementi che dovrebbero apparire in Open Sans Bold.

Il modo in cui descrivi sembra funzionare anche sulla maggior parte dei browser, ma non ci conterei. Dopo aver dichiarato un font come peso normale nel tuo @font-face, l'impostazione di font-weight: bold sul testo in quel font potrebbe causare a) un errore, poiché un peso non corrisponde o b) il carattere preso come punto di partenza per il grassetto algoritmico, risultante in doppia audacia. E se non sbaglio, b) è ciò che accade su Safari (Win 7).

Answer 2

quali hai correttamente evidenziato un problema con il 'new age' di font web, questo post del blog si discute e presenta una soluzione http://elliotjaystocks.com/blog/font-weight-in-the-age-of-web-fonts/

frammento rilevante

Problema numero due è significativamente più grande di il primo. Considera FF Enzo, che non ha un peso di 400 (o anche di 500). In alcune circostanze, il suo peso leggero (300) potrebbe essere un po 'troppo sottile per il tipo di corpo piccolo, quindi usiamo invece il peso 600. Ah, sembra a posto.

Ma non va bene! Perché se quel carattere non può essere visualizzato e facciamo un ripiego su qualcos'altro, quel font di fallback renderà il suo peso 600; in altre parole: audace.

Una soluzione alternativa?

C'è un modo per aggirare questo ed è il metodo utilizzato da FontsLive nel CSS che generano per i propri utenti: si dichiara ogni peso singolarmente piuttosto che l'intera famiglia. Il loro codice è un po 'come questo:

codice CSS:

{ font-family: 'FamilyName Light', 'FallbackFamily', serif; font-weight: normal; } 
{ font-family: 'FamilyName Medium', 'FallbackFamily', serif; font-weight: normal; } 
{ font-family: 'FamilyName Bold', 'FallbackFamily', serif; font-weight: bold; } 
{ font-family: 'FamilyName Black', 'FallbackFamily', serif; font-weight: bold; } 

Aggiornamento:

@font-face { 
    font-family: 'OpenSansBold'; 
    src: url('../fonts/OpenSans-Bold-webfont.eot'); 
    src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/OpenSans-Bold-webfont.woff') format('woff'), 
     url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'), 
     url('../fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg'); 
    font-weight: bold; 
    font-style: normal; 
} 

E poi qualcosa di simile (come lei ha suggerito):

{ font-family: OpenSansBold, 'Arial'; font-weight: bold; }