我可以通過@ font-face合併CSS中的字體系列以獲得更多字體varians嗎？

Question

我有這樣的代碼：

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

這是相同的「字體」，但它改變由於重量/風格。我可以將這些樣式合併到一個字體系列中嗎？

Answer 1

似乎就可以了，這是從W3 Spec：

這些描述符定義字體的特點，並匹配樣式特定面部的過程中使用 。對於使用多個@ font-face規則定義的字體 ，用戶代理可以下載該系列中的所有面或使用這些描述符 有選擇地下載與 文檔中使用的實際樣式相匹配的字體。這些描述符的值與 相應的字體屬性相同，只是相關關鍵字 不允許，'大膽'和'較輕'。如果省略這些描述符，則假定默認值爲 。

看看從谷歌字體這個例子：

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

的利用方法：

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