Posso unire una famiglia di caratteri in CSS per avere più varianti di carattere tramite @ font-face?

Question

Ho questo codice:

@font-face { 
    font-family: 'Conv_Casper'; 
    src: url('fonts/Casper.eot'); 
    src: local('☺'), url('styles/casper/Casper.woff') format('woff'), url('fonts/Casper.ttf') format('truetype'), url('fonts/Casper.svg') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'Conv_Casper Italic'; 
    src: url('fonts/Casper Italic.eot'); 
    src: local('☺'), url('styles/casper/Casper Italic.woff') format('woff'), url('fonts/Casper Italic.ttf') format('truetype'), url('fonts/Casper Italic.svg') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'Conv_Casper Bold'; 
    src: url('fonts/Casper Bold.eot'); 
    src: local('☺'), url('styles/casper/Casper Bold.woff') format('woff'), url('fonts/Casper Bold.ttf') format('truetype'), url('fonts/Casper Bold.svg') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'Conv_Casper Bold Italic'; 
    src: url('fonts/Casper Bold Italic.eot'); 
    src: local('☺'), url('styles/casper/Casper Bold Italic.woff') format('woff'), url('fonts/Casper Bold Italic.ttf') format('truetype'), url('fonts/Casper Bold Italic.svg') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

è lo stesso "Carattere", ma cambia a causa del peso/stile. Posso unire questi stili in un'unica famiglia di font?

Answer 1

Sembra che si può, questo è dal W3 Spec:

Questi descrittori definiscono le caratteristiche di un tipo di carattere e sono utilizzato nel processo di abbinare stili di volti specifici. Per una famiglia di font definita con più regole @ font-face, gli agenti utente possono sia scaricare tutti i volti della famiglia o utilizzare questi descrittori su scaricare selettivamente font che corrispondono agli stili effettivi utilizzati nel documento . I valori per questi descrittori sono uguali a quelli per le proprietà dei font corrispondenti, tranne che le parole chiave relative sono non consentite, "bolder" e "più leggero". Se questi descrittori sono omessi, si assumono i valori di default .

Date un'occhiata a questo esempio da Google Fonts:

@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); 
} 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 600; 
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff'); 
} 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: italic; 
    font-weight: 300; 
    src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxh_xHqYgAV9Bl_ZQbYUxnQU.woff) format('woff'); 
} 

Un esempio di utilizzo:

.will-use-the-first-font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 400; 
} 

.will-use-the-second-font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 600; 
} 

.will-use-the-third-font-face { 
    font-family: 'Open Sans'; 
    font-style: italic; 
    font-weight: 300; 
}