Czy mogę scalić rodzinę czcionek w CSS, aby mieć więcej czcionek za pomocą @ font-face?

Question

mam ten kod:

@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; 
} 

to samo „font”, ale to ze względu na zmianę masy ciała/stylu. Czy mogę połączyć te style w jedną rodzinę czcionek?

Answer 1

Wydaje się, że można, to jest od W3 Spec:

te deskryptory określenia cech twarzy i czcionki są używany w procesie dopasowania do konkretnych stylów twarzy. W przypadku rodziny czcionek zdefiniowanej przy użyciu kilku reguł @ font-user agenci użytkownika mogą albo pobrać wszystkie twarze z rodziny, albo użyć tych deskryptorów do wybrania selektywnie pobierającego czcionki, które pasują do rzeczywistych stylów używanych w dokumencie . Wartości tych deskryptorów są takie same jak w przypadku odpowiednich właściwości czcionek, z wyjątkiem tego, że względne słowa kluczowe są niedozwolone, "bolderowsze" i "jaśniejsze". Jeśli te deskryptory zostaną pominięte, przyjmuje się wartości domyślne: .

Spójrz na ten przykład od Fonts Google:

@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'); 
} 

przykładem użycia:

.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; 
}