Pourquoi ma @font-face ne fonctionne-t-elle pas dans IE9 sur un site en direct ?

Problèmes de débogage de @font-face dans IE9

Malgré un fonctionnement transparent dans IE8 et d'autres navigateurs, les rencontres @font-face affichent des difficultés dans IE9. Ce problème se pose spécifiquement sur le site live, alors que la visualisation locale sur l'ordinateur de l'utilisateur ne présente aucun problème.

Le code CSS en question est :

@font-face {
                font-family: 'LeagueGothicRegular';
                src: url('league_gothic_0-webfont.eot');
                src: local('League Gothic Regular'), url('league_gothic_0-webfont.woff') format('woff'), url('league_gothic_0-webfont.ttf') format('truetype'), url('league_gothic_0-webfont.svg#webfonta36nFpyE') format('svg');font-weight: normal;font-style: normal;
}

Un problème similaire a été signalé , la police fonctionnant dans toutes les versions d'IE sauf IE9. Cependant, changer le mode Document (via les outils de développement F12) résout le problème, mais pas idéalement.

Mise à jour :

Une enquête a révélé qu'IE9 utilise le .woff variation de police au lieu de la version .eot prévue. En incluant les variations de police complètes générées par le générateur fontsquirrel @font-face et en utilisant la technique smileyface-local, le problème a été résolu :

@font-face {
  font-family: "LucidaFax-bold";
  src: url("_font/LucidaFax-bold.eot");
  src: local("☺"),
  url("_font/LucidaFax-bold.woff") format("woff"),
  url("_font/LucidaFax-bold.ttf") format("truetype"),
  url("_font/LucidaFax-bold.svg#LucidaFax-bold") format("svg");
  }

h1 { font-family: "LucidaFax-bold", serif;}

De plus, le texte Mark "Tarquin" Wilton-Jones- shadow hack a été utilisé pour obtenir un style visuel cohérent dans toutes les versions d'IE.

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!