L'utilisation de multiples @font-face des règles CSS

Comment puis-je utiliser plus d' @font-face règle dans mon CSS?

J'ai inséré ce dans ma feuille de style:

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

Actuellement, cela ne s'applique pour l'ensemble du corps du texte sur le site. Mais, je tiens à préciser h1 pour utiliser une police différente. Comment puis-je faire cela?

InformationsquelleAutor Tim | 2011-02-02
  1. 85

    Note, vous pourriez également être intéressé par:

    Web personnalisé police ne travaille pas dans IE9

    Qui comprend un descriptif de la panne de la CSS que vous voyez ci-dessous (et explique les réglages qu'il fonctionne mieux sur 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;
}

    Et de votre suivi de questions:

    Q. je voudrais utiliser une police de caractères tels que "Bumble bee", par exemple. Comment puis-je utiliser @font-face pour rendre les polices disponibles sur l'utilisateur
    ordinateur?

    Noter que je ne sais pas quel est le nom de votre Bourdon de police ou le fichier, afin d'ajuster en conséquence, et que la police face déclaration doit précéder (venir avant) votre utilisation de l'informatique, comme je l'ai indiqué ci-dessus.

    Q. puis-je encore utiliser d'autres @font-face caractère "GestaRegular" ainsi? Puis-je utiliser les deux dans la même feuille de style?

    Juste la liste à eux comme je l'ai montré dans mon exemple. Il n'y a aucune raison que vous ne pouvez pas déclarer à la fois. Tout ce que @font-face fait est de demander au navigateur de télécharger et de faire un font-family disponible. Voir: http://iliadraznin.com/2009/07/css3-font-face-multiple-weights

    InformationsquelleAutor Jared Farrish
  2. 9
    @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; }
    InformationsquelleAutor Surya R Praveen