Comment obtenir la compatibilité entre navigateurs avec @font-face et corriger les types MIME ?

Cross Browser @font-face avec les types MIME corrects

Lors de l'utilisation de la règle @font-face pour intégrer des polices, en spécifiant le MIME correct le type est crucial pour un rendu correct sur tous les navigateurs. Dans ce cas, Chrome affiche une erreur due à un type MIME incorrect.

Pour résoudre ce problème, examinons une déclaration @font-face compatible avec plusieurs navigateurs :

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
         url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

• .eot pour IE : IE nécessite le format de fichier .eot.
• .woff ou .ttf pour les autres navigateurs : Les autres navigateurs prennent en charge soit .woff, soit .ttf.

Pour générer ces formats de police à partir de la police source, utilisez le générateur de polices de caractères de Font Squirrel.

De plus, un fichier .htaccess est requis pour spécifier les types MIME pour les formats de police :

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

En implémentant ces modifications, la règle @font-face intégrera correctement les polices dans Firefox et Chrome, garantissant un rendu cohérent sur tous les navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!