28 votes

Plusieurs polices en CSS

Comment puis-je utiliser plus d'un type de @ font-face 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');}
 

Actuellement, cela ne s'applique qu'à l'intégralité du corps du texte sur le site, mais je voudrais spécifier h1 pour utiliser une police de police différente.

Comment puis-je faire ceci? Merci

48voto

Jared Farrish Points 26391

Remarque, vous pouvez é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;
}

Remarque 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 ci-dessus.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by: