Confezionamento di più pesi in un carattere Web

Question

Uso Font Grirrel per convertire i miei font in versioni web utilizzabili. Mi piacerebbe non dover convertire ogni peso separatamente e includerli nel mio css (aggiungo un sacco di bloat con tutte quelle chiamate).

C'è un modo per impacchettare più pesi in un font e utilizzare la proprietà di tipo font-weight per chiamare correttamente i caratteri corretti?

Cercando di evitare il faux-bold e il faux-italics qui.

Answer 1

Impostare i font-weight e font-style proprietà di conseguenza nel vostro @font-face chiamate (invece di output predefinito di FontSquirrel dove tutti sono impostati per normal e hanno nomi separati per ogni peso/stile invece), e nominarli tutti lo stesso carattere.

Ecco un esempio da un sito che ho costruito l'anno scorso:

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

noti che FontSquirrel non genera automaticamente il codice in questo modo per una ragione - che è che alcuni anziani browser/agenti utente non supportano font-weight e font-style proprietà all'interno delle dichiarazioni @font-face, quindi è più compatibile con le versioni precedenti per utilizzare il metodo in cui si assegnano i caratteri in modo diverso per ogni peso e stile (CartoGothicRegular, CartoGothicBold, CartoGothicItalic, CartoGothicBoldItalic e così via).

Inoltre, FontSquirrel in realtà può fare questo per voi - se si fa clic su Impostazioni avanzate nel generatore WebFont, v'è un'opzione in "CSS" chiamato Style link che sarà loro uscita in questo formato.

Answer 2

Ecco per eseguire il backup risposta di noia:

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

Non c'è davvero nessun modo per aggirare la creazione di font separati, ma utilizzando gli attributi font-weight e font-style, si ridurrà la chiamata. Devi solo dichiarare font-family una volta.