Utilizzare più regole @ font-face nei CSS

Question

Come posso utilizzare più della regola @font-face nel mio CSS?

ho inserito questo nel mio foglio di stile:

body { 
    background: #fff url(../images/body-bg-corporate.gif) repeat-x; 
    padding-bottom: 10px; 
    font-family: 'GestaRegular', Arial, Helvetica, sans-serif; 
} 

@font-face { 
    font-family: 'GestaReFogular'; 
    src: url('gestareg-webfont.eot'); 
    src: local('☺'), 
     url('gestareg-webfont.woff') format('woff'), 
     url('gestareg-webfont.ttf') format('truetype'), 
     url('gestareg-webfont.svg#webfontg8dbVmxj') format('svg'); 
} 

Questo si applica attualmente solo per l'intero corpo del testo sul sito. Ma, vorrei specificare h1 per usare un font diverso. Come posso fare questo?

Answer 1

nota, si può anche essere interessati a:

Custom web font not working in IE9

che comprende una ripartizione più descrittivo del CSS che vedete qui sotto (e spiega le modifiche che farlo funzionare meglio su IE6-9).

---

@font-face { 
    font-family: 'Bumble Bee'; 
    src: url('bumblebee-webfont.eot'); 
    src: local('☺'), 
     url('bumblebee-webfont.woff') format('woff'), 
     url('bumblebee-webfont.ttf') format('truetype'), 
     url('bumblebee-webfont.svg#webfontg8dbVmxj') format('svg'); 
} 

@font-face { 
    font-family: 'GestaReFogular'; 
    src: url('gestareg-webfont.eot'); 
    src: local('☺'), 
     url('gestareg-webfont.woff') format('woff'), 
     url('gestareg-webfont.ttf') format('truetype'), 
     url('gestareg-webfont.svg#webfontg8dbVmxj') format('svg'); 
} 

body { 
    background: #fff url(../images/body-bg-corporate.gif) repeat-x; 
    padding-bottom: 10px; 
    font-family: 'GestaRegular', Arial, Helvetica, sans-serif; 
} 

h1 { 
    font-family: "Bumble Bee", "Times New Roman", Georgia, Serif; 
} 

---

E le vostre domande di follow-up:

D. vorrei usare un font come "Bumble", per esempio. Come posso utilizzare @font-face per rendere quel carattere disponibile sul computer dell'utente ?

nota che io non so quale sia il nome del tuo carattere Bumble Bee o il file è, quindi regolare di conseguenza, e che la dichiarazione font-face dovrebbe precedere (venire prima) l'utilizzo di esso, come I' ve mostrato sopra.

D. Posso comunque utilizzare le altre @font-face carattere "GestaRegular" come bene? Posso usare entrambi nello stesso foglio di stile?

Basta elencarli insieme come ho mostrato nel mio esempio. Non c'è motivo per cui non puoi dichiararli entrambi. Tutto ciò che fa @font-face indica al browser di scaricare e rendere disponibile una famiglia di caratteri. Vedi: http://iliadraznin.com/2009/07/css3-font-face-multiple-weights

Answer 2

@font-face { 
    font-family: Kaffeesatz; 
    src: url(YanoneKaffeesatz-Thin.otf); 
    font-weight: 200; 
} 
@font-face { 
    font-family: Kaffeesatz; 
    src: url(YanoneKaffeesatz-Light.otf); 
    font-weight: 300; 
} 
@font-face { 
    font-family: Kaffeesatz; 
    src: url(YanoneKaffeesatz-Regular.otf); 
    font-weight: normal; 
} 
@font-face { 
    font-family: Kaffeesatz; 
    src: url(YanoneKaffeesatz-Bold.otf); 
    font-weight: bold; 
} 
h3, h4, h5, h6 { 
    font-size:2em; 
    margin:0; 
    padding:0; 
    font-family:Kaffeesatz; 
    font-weight:normal; 
} 
h6 { font-weight:200; } 
h5 { font-weight:300; } 
h4 { font-weight:normal; } 
h3 { font-weight:bold; }