將多個權重打包成一個網絡字體

Question

我正在使用字體松鼠將我的字體轉換爲可用的網絡版本。我想不必分別轉換每個權重，並將它們包含在我的css中（會增加所有這些調用的膨脹）。

有沒有辦法將多個權重打包成一種字體，並使用font-weight屬性來正確調用正確的字符？

試圖避免這裏的人造粗體和人造斜體。

Answer 1

設置font-weight和font-style性質相應地你@font-face電話（而不是FontSquirrel的默認輸出，其中所有的人都設置爲normal，他們爲每個重量/風格，而不是單獨的名稱），並將它們命名爲所有相同的字體。

下面是從一個網站的一個例子，我去年建成：

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

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

@font-face { 
    font-family: 'CartoGothic'; 
    src: url('library/fonts/CartoGothicStd-Italic-webfont.eot'); 
    src: url('library/fonts/CartoGothicStd-Italic-webfont.eot?#iefix') format('embedded-opentype'), 
     url('library/fonts/CartoGothicStd-Italic-webfont.woff') format('woff'), 
     url('library/fonts/CartoGothicStd-Italic-webfont.ttf') format('truetype'), 
     url('library/fonts/CartoGothicStd-Italic-webfont.svg#CartoGothicStdItalic') format('svg'); 
    font-weight: normal; 
    font-style: italic; 
} 

@font-face { 
    font-family: 'CartoGothic'; 
    src: url('library/fonts/CartoGothicStd-BoldItalic-webfont.eot'); 
    src: url('library/fonts/CartoGothicStd-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), 
     url('library/fonts/CartoGothicStd-BoldItalic-webfont.woff') format('woff'), 
     url('library/fonts/CartoGothicStd-BoldItalic-webfont.ttf') format('truetype'), 
     url('library/fonts/CartoGothicStd-BoldItalic-webfont.svg#CartoGothicStdBoldItalic') format('svg'); 
    font-weight: bold; 
    font-style: italic; 
} 

注意FontSquirrel不會自動生成代碼，這樣是有原因的 - 這是一些舊的瀏覽器/用戶代理不支持font-weight和@font-face聲明中的font-style屬性，因此向後兼容使用爲每個重量和樣式命名字體的方法（CartoGothicRegular，CartoGothicBold，CartoGothicItalic，CartoGothicBoldItalic等）。另外，FontSquirrel實際上可以爲你做到這一點 - 如果你點擊Webfont Generator中的專家設置，「CSS」下有一個選項叫做Style Link，它將以這種格式輸出它們。

Answer 2

這裏的備份倦怠的回答是：

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

@font-face {  
    font-family: 'Your Font'; 
    src: url('fonts/SF Your Font Bold.eot'); 
    src: local('☺'), url('fonts/SF Your Font Bold.woff') format('woff'), url('fonts/SF Your Font Bold.ttf') format('truetype'), url('fonts/SF Your Font Bold.svg') format('svg'); 
    font-weight: bold; 
    font-style: normal; 
} 

@font-face {  
    font-family: 'Your Font'; 
    src: url('fonts/SF Your Font Italic.eot'); 
    src: local('☺'), url('fonts/SF Your Font Italic.woff') format('woff'), url('fonts/SF Your Font Italic.ttf') format('truetype'), url('fonts/SF Your Font Italic.svg') format('svg'); 
    font-weight: normal; 
    font-style: italic; 
} 

@font-face {  
    font-family: 'Your Font'; 
    src: url('fonts/SF Your Font Bold Italic.eot'); 
    src: local('☺'), url('fonts/SF Your Font Bold Italic.woff') format('woff'), url('fonts/SF Your Font Bold Italic.ttf') format('truetype'), url('fonts/SF Your Font Bold Italic.svg') format('svg'); 
    font-weight: bold; 
    font-style: italic; 
} 

這確實圍繞創建單獨的字體沒有辦法，但使用font-weight和font-style屬性，就可以減少通話。你只申報font-family一次。