Verwenden Sie in CSS mehrere @ font-face-Regeln

Wie kann ich @font-facein meinem CSS mehr als nur Regeln verwenden?

Ich habe dies in mein Stylesheet eingefügt:

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

Dies gilt derzeit nur für den gesamten Text auf der Website. Ich möchte jedoch angeben h1, dass eine andere Schriftart verwendet werden soll. Wie kann ich das machen?

Beachten Sie, dass Sie möglicherweise auch interessiert sind an:

Benutzerdefinierte Webschrift funktioniert nicht in IE9

Dies beinhaltet eine aussagekräftigere Aufschlüsselung des unten gezeigten CSS (und erläutert die Verbesserungen, die dazu führen, dass es unter IE6-9 besser funktioniert).

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

Und Ihre Anschlussfragen:

F. Ich möchte eine Schriftart wie "Hummel" verwenden. Wie kann ich @font-facediese Schriftart auf dem Computer des Benutzers verfügbar machen?

Beachten Sie, dass ich nicht weiß, wie Ihre Bumble Bee-Schriftart oder -Datei heißt. Passen Sie sie daher entsprechend an und dass die Deklaration der Schriftart Ihrer Verwendung vorausgehen sollte (wie oben gezeigt).

Q. Kann ich noch die andere @font-faceSchrift „GestaRegular“ als auch? Kann ich beide im selben Stylesheet verwenden?

Listen Sie sie einfach zusammen, wie ich in meinem Beispiel gezeigt habe. Es gibt keinen Grund, warum Sie nicht beide deklarieren können. Sie @font-facemüssen lediglich den Browser anweisen, eine Schriftfamilie herunterzuladen und verfügbar zu machen. Siehe: http://iliadraznin.com/2009/07/css3-font-face-multiple-weights

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

Mehrere Variationen einer Schriftfamilie können deklariert werden, indem die Eigenschaft font-weight und src der Regel @ font-face geändert wird.

/* Regular Weight */
@font-face {
    font-family: Montserrat;
    src: url("../fonts/Montserrat-Regular.ttf");
}

/* SemiBold (600) Weight */
@font-face {
    font-family: Montserrat;
    src: url("../fonts/Montserrat-SemiBold.ttf");
    font-weight: 600;
}

/* Bold Weight */
@font-face {
    font-family: Montserrat;
    src: url("../fonts/Montserrat-Bold.ttf");
    font-weight: bold;
}

Deklarierte Regeln können wie folgt verwendet werden

/* Regular */
font-family: Montserrat;


/* Semi Bold */
font-family: Montserrat;
font-weght: 600;

/* Bold */
font-family: Montserrat;
font-weight: bold;