web-dev-qa-db-fra.com

Utiliser plusieurs règles @ font-face en CSS

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

J'ai inséré ceci 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');
}

Cela ne s'applique actuellement qu'à l'ensemble du texte du site. Mais je voudrais préciser h1 pour utiliser une police différente. Comment puis-je faire ceci?

htmlcssfontsfont-facewebfonts
64
Tim

Remarque, vous pouvez également être intéressé par:

La police web personnalisée ne fonctionne pas dans IE9

Ce qui inclut une ventilation plus descriptive du CSS que vous voyez ci-dessous (et explique les modifications qui le rendent meilleur 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 vos questions de suivi:

Q. J'aimerais utiliser une police telle que "Bumble bee", par exemple. Comment puis-je utiliser @font-face rendre cette police disponible sur l'ordinateur de l'utilisateur?

Notez que je ne sais pas quel est le nom de votre police ou de votre fichier Bumble Bee, ajustez-vous en conséquence, et la déclaration font-face devrait précéder (venir avant) votre utilisation de celle-ci, comme je l’ai montré ci-dessus.

Q. Puis-je quand même utiliser l'autre @font-face police "GestaRegular" aussi? Puis-je utiliser les deux dans la même feuille de style?

Il suffit de les lister ensemble comme je l’ai montré dans mon exemple. Il n'y a aucune raison pour que vous ne puissiez pas déclarer les deux. Tout ça @font-face ne demande au navigateur de télécharger et de mettre à disposition une famille de polices. Voir: http://iliadraznin.com/2009/07/css3-font-face-multiple-weights

85
Jared Farrish
@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; }
8
Surya R Praveen