Come imposti stack di font web con più stili?

Question

font web tendono a venire suddivisi in file separati per grassetto, corsivo, ecc sto usando un @font-face dichiarazioni come questo (tagliate fino a WOFF solo per questo esempio):

@font-face { 
    font-family: 'OpenSans'; 
    src: url("fonts/OpenSans-Regular.woff") format("woff"); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'OpenSansItalic'; 
    src: url("fonts/OpenSans-Italic.woff") format("woff"); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'OpenSansBold'; 
    src: url("fonts/OpenSans-Bold.woff") format("woff"); 
    font-weight: normal; 
    font-style: normal; 
} 

E poi ho implementano i vari stili:

body { 
    font-family: "OpenSans", Helvetica, sans-serif; 
} 

strong { 
    font-family: "OpenSansBold", Helvetica, sans-serif; 
    font-weight: normal; /* Web font is already bold */ 
} 

em { 
    font-family: "OpenSansItalic", Helvetica, sans-serif; 
    font-style: normal; /* Web font is already italic */ 
} 

devo ignorare lo stile della UA grassetto/corsivo (le righe di commento di cui sopra). Altrimenti, aggiungerà un aspetto finto-grassetto al testo che è molto brutto.

Se dovessi lasciarlo così, e uno dei file di font web non è stato caricato, il font di fallback non avrebbe lo stile corretto. Ad esempio, questo:

<strong>This text is bold</strong> 

visualizzerebbe come Helvetica normale se OpenSans-Bold.woff è riuscito a caricare, ma voglio che sia Helvetica grassetto.

Come ci si assicura che i caratteri di fallback abbiano lo stile corretto in grassetto/corsivo/regolare?

Answer 1

si desidera combinare le regole @ font-face ..... solo dichiarare un nome di famiglia di font e dichiarare i pesi come variabili, come grassetto, corsivo, ecc. L'esempio di seguito mostra come utilizzare Open Sans regolare con Open Sans Bold:

@font-face{font-family:"open_sansregular"; 
src:url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.eot"); 
src:url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.eot?#iefix") format("embedded-opentype"), 
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.woff") format("woff"), 
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.ttf") format("truetype"), 
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.svg#open_sansregular") format("svg"); 
font-weight:normal; font-style:normal} 

@font-face{font-family:"open_sansregular"; 
src: url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.eot"); 
src: url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.eot?#iefix") format("embedded-opentype"), 
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.woff") format("woff"), 
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.ttf") format("truetype"), 
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.svg#open_sansbold") format("svg"); 
font-weight:bold; font-style:normal} 

se conosci addebbitato regola @ font-face, la sua così facile ... le uniche differenze nelle due regole di cui sopra è l'URL (s) e il font-weight . quindi per il corsivo, cambia l'url in modo che punti al carattere in corsivo, quindi cambia lo stile in font-style:italic.

ci sono un sacco di benefici che si ottengono da questo, comprese meno riscritture perché non si dovrà ridichiarare ogni font ... lo si dichiara solo una volta.

ma che riduce sostanzialmente il CSS a questo:

body{font-family:"OpenSans", Helvetica, sans-serif} 
strong{font-weight:700} 
em{font-style:italic} 

poi semplicemente costruire una migliore pila di carattere che fornisce la quantità/livello di copertura che si desidera.