Pourquoi ma @font-face fonctionne-t-elle dans tous les navigateurs à l'exception d'IE9 ?

Énigme @font-face : problèmes d'affichage dans IE9 lors du fonctionnement dans d'autres navigateurs

Dans un cas curieux de problèmes de typographie Web, un utilisateur a rencontré une anomalie avec @font-face. La police en question s'affiche parfaitement dans tous les navigateurs à l'exception d'IE9, laissant l'utilisateur perplexe. De plus, la police apparaît inexplicablement sur la version locale du site Web mais disparaît lorsqu'elle est déployée en direct.

Le site Web en question, bigwavedesign.co.uk/gcc/gcc/, utilise la déclaration @font-face suivante :

    @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;
}

Cette anomalie a rendu l'utilisateur perplexe, l'incitant à rechercher les causes potentielles. Dans une découverte surprenante, ils ont remarqué qu'un autre site Web, iamthomasbishop.com, avait réussi à restituer la même police avec succès dans IE9. Déterminer comment ce site a réalisé cet exploit reste un casse-tête.

En fin de compte, on soupçonnait que le problème provenait de la préférence d'IE9 pour la version de police .woff par rapport à la version .eot. L'intégration de la gamme complète de variantes de polices dans le projet à l'aide du sous-programme smileyface-local a résolu le problème. Le code mis à jour fonctionne désormais de manière transparente dans toutes les versions d'IE :

@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");
  }

Ainsi, le mystère de la police manquante dans IE9 a été résolu, démontrant l'importance de prendre en compte les bizarreries spécifiques au navigateur dans la conception Web et la puissance de résolution collaborative de problèmes pour surmonter les défis techniques.

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!