web-dev-qa-db-fra.com

Utilisez plusieurs polices personnalisées en utilisant @ font-face?

Je suis sûr que je manque quelque chose de vraiment simple. Vous utilisez une seule police personnalisée avec une police normale:

@font-face {
    font-family: CustomFont;
    src: url('CustomFont.ttf');
}

Tout fonctionne bien lorsque je l'utilise mais si je veux ajouter une autre police personnalisée, que dois-je faire? J'ai essayé de séparer par une virgule la suivante ou d'ajouter une autre police, mais je ne parviens pas à utiliser la deuxième police.

csscss3fontsfont-face
62
James MV

Vous ajoutez simplement un autre @font-face règle:

@font-face {
    font-family: CustomFont;
    src: url('CustomFont.ttf');
}

@font-face {
    font-family: CustomFont2;
    src: url('CustomFont2.ttf');
}

Si votre deuxième police ne fonctionne toujours pas, assurez-vous que vous épelez correctement son nom et son nom de fichier, les caches de votre navigateur se comportent bien, votre système d'exploitation n'interfère pas avec une police du même nom, etc.

115
BoltClock

Si vous rencontrez un problème avec le fonctionnement de la police, j’ai également eu ce problème par le passé et le problème que j’ai trouvé était dû au caractère font-family:. Cela devait correspondre à quel nom de police avait été donné.

Le moyen le plus simple que j'ai trouvé pour le savoir était d'installer la police et de voir quel nom d'affichage est donné.

Par exemple, j'utilisais Gill Sans sur un projet, mais la police de caractères s'appelait Gill Sans MT. L’espacement et la capitlisation étaient également importants pour bien faire les choses.

J'espère que ça t'as aidé.

7
Adam Stacey

Départ fontsquirrel . Ils ont un générateur de polices Web, qui créera également une feuille de style adaptée à votre police (recherchez "@ font-face kit"). Cette feuille de style peut être incluse dans la vôtre ou peut être utilisée comme modèle.

5
tdammers

Vous pouvez facilement utiliser plusieurs polices. Vous trouverez ci-dessous un exemple de mon utilisation antérieure:

<!--[if (IE)]><!-->
    <style type="text/css" media="screen">
        @font-face {
            font-family: "Century Schoolbook";
            src: url(/fonts/century-schoolbook.eot);
        }
        @font-face {
            font-family: "Chalkduster";
            src: url(/fonts/chalkduster.eot);
        }
    </style>
<!--<![endif]-->
<!--[if !(IE)]><!-->
    <style type="text/css" media="screen">
        @font-face {
            font-family: "Century Schoolbook";
            src: url(/fonts/century-schoolbook.ttf);
        }
        @font-face {
            font-family: "Chalkduster";
            src: url(/fonts/chalkduster.ttf);
        }
    </style>
<!--<![endif]-->

Il est à noter que les polices peuvent être amusantes sur différents navigateurs. Les polices sur les navigateurs précédents fonctionnent, mais vous devez utiliser les fichiers eot au lieu de ttf.

C'est pourquoi j'inclus mes polices dans la tête du fichier html, car je peux ensuite utiliser des balises conditionnelles IE pour utiliser les fichiers eot ou ttf en conséquence.

Si vous avez besoin de convertir ttf en eot à cette fin, il existe un site Web génial que vous pouvez faire gratuitement en ligne, qui peut être trouvé à l'adresse http://ttf2eot.sebastiankippe.com/ .

J'espère que ça t'as aidé.

3
Adam Stacey

J'utilise cette méthode dans mon fichier css

@font-face {
  font-family: FontName1;
  src: url("fontname1.eot"); /* IE */
  src: local('FontName1'), url('fontname1.ttf') format('truetype'); /* others */
}
@font-face {
  font-family: FontName2;
  src: url("fontname1.eot"); /* IE */
  src: local('FontName2'), url('fontname2.ttf') format('truetype'); /* others */
}
@font-face {
  font-family: FontName3;
  src: url("fontname1.eot"); /* IE */
  src: local('FontName3'), url('fontname3.ttf') format('truetype'); /* others */
}
3
5ulo